/*
  Real Glaze components for the 9 service pages. Loaded alongside company.css
  (already has .headingstyle1/.gridboxes1/.columns/.accordion/
  .partnersmain/.cta, reused unchanged here) -- this file adds only
  the components NOT already ported: the real .banner hero (single
  slide, same markup/CSS family already approved on the homepage, just
  not yet in a shared file), .linksbar (in-page jump nav), .highlightbox
  (overview callout), and .product-tables1 (plan comparison table).
*/

/*
  Root-cause fix: Spanish body.css intentionally scales body copy to 18px
  (1.125rem) site-wide for article readability (see shell-parity.css's
  .headermain comment for the same issue on the header). The real theme's
  em-based component sizing (hero, .linksbar, .highlightbox, .headingstyle1,
  .product-tables1 below) all assume a 16px base, so the 18px body leaks in
  and inflates every one of them ~1.125x uniformly -- oversized nav tabs,
  oversized heading badges, taller hero, etc. Same fix already proven on
  the homepage (home.css's body.homepage-real-template #contenido rule):
  pin the real-template content wrapper back to 16px. Scoped automatically
  since this file is only loaded on the 9 service pages.
*/
#contenido {
	font-size: 16px;
	/* --line-height-base is unitless (1.6), so every descendant recomputes
	   1.6x its OWN font-size (e.g. 30.72px for a 19.2px nav link). The real
	   theme's line-height is set in em at the body, so it computes ONCE
	   (1.6 x 16px = 25.6px) and that fixed px value is what inherits down
	   -- declaring it in em here reproduces the same real inheritance
	   instead of each component recalculating against its own size. */
	line-height: 1.6em;
}

/*
  In-page nav scroll-target offset. The real header is static in normal
  flow but goes position:fixed once scrolled past its own height
  (shell-nav.js's "stuckMenu" port, verified against the real theme's
  own jQuery stickUp plugin) -- which is exactly what happens on every
  jump from the .linksbar, so without scroll-margin-top the fixed header
  lands on top of the section heading. Values are the real MEASURED
  .headermain height once stuck (not guessed) at each breakpoint this
  project already uses elsewhere, +20px breathing room:
  >1260px: 150px -> 170px | <=1260px: 269px -> 289px | <=760px: 261px -> 281px
  (the 1260px/760px breakpoints are where the real header's own layout
  -- column stacking, mobile nav -- changes its stuck height, found by
  measuring getBoundingClientRect().height across the full width range).
  Scoped to the service pages' own linksbar targets only, via this
  file's limited inclusion -- does not touch the sitewide #contenido/
  #servicios/#trust-heading/#soporte rule in components.css.
*/
#overview, #plans, #features, #whychooseus, #faqs,
#featured, #pricing, #niveles {
	scroll-margin-top: 170px;
}
/* Real theme: html{scroll-behavior:smooth} (layout.css). Missing from this
   project's base.css entirely (anchor jumps were instant). Scoped here via
   this file's own limited inclusion rather than adding it to base.css,
   which would affect every page, not just the 9 service pages this task
   covers. prefers-reduced-motion already forces scroll-behavior:auto
   site-wide (base.css), which naturally overrides this too. */
html { scroll-behavior: smooth; }
@media (max-width: 1260px) {
	#overview, #plans, #features, #whychooseus, #faqs,
	#featured, #pricing, #niveles {
		scroll-margin-top: 289px;
	}
}
@media (max-width: 760px) {
	#overview, #plans, #features, #whychooseus, #faqs,
	#featured, #pricing, #niveles {
		scroll-margin-top: 281px;
	}
}

/* ===== .banner hero (single-slide variant, no .slideshow wrapper) ===== */
.banner {
	background-size: cover;
	background-color: var(--enshell-background-banner);
	background-position: center center;
	background-repeat: no-repeat;
	margin: 0;
	color: var(--enshell-color-white);
	text-shadow: var(--enshell-color-black) 1px 1px;
	overflow: hidden;
	border-bottom: var(--enshell-color-border) 1px solid;
}
.banner img { display: block; }
.banner .contentcontainer { padding: var(--enshell-spacing-parent) 0; position: relative; }
.banner a, .banner a:hover { color: var(--enshell-color-white); }
.banner .banner-price {
	position: absolute; top: 20px; right: 0;
	background: var(--enshell-color-secondary-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-background-gradient-top) 0, var(--enshell-color-secondary-background-gradient-bottom) 100%);
	border: var(--enshell-color-secondary-background-border) 1px solid;
	color: var(--enshell-color-secondary-foreground);
	text-shadow: var(--enshell-color-secondary-foreground-shadow) 1px 1px;
	border-radius: var(--enshell-border-radius-default);
	padding: 7px 10px; text-align: center; z-index: 2; display: flex; justify-content: center;
}
.banner .banner-price .banner-price-price { font-weight: bold; font-size: 1.3em; }
.banner .banner-price .banner-price-before { border-right: var(--enshell-color-secondary-background-border) 1px solid; padding-right: 8px; margin-right: 8px; }
.banner .banner-price .banner-price-term { margin-left: 8px; }
.banner .banner-price .banner-price-currencyprefix,
.banner .banner-price .banner-price-currencysuffix { font-weight: bold; font-size: 1em; display: inline; }
.banner .banner-heading {
	color: var(--enshell-color-primary-background);
	text-shadow: var(--enshell-color-primary-background-shadow) 1px 1px;
	text-align: center; font-size: 3em; line-height: 1.2em;
	margin: 0 0 var(--enshell-spacing-child) 0;
	font-family: var(--enshell-font-heading); font-weight: bold;
}
.banner .banner-text { text-align: center; font-size: 1.6em; line-height: 1.3em; margin: 0 0 var(--enshell-spacing-child) 0; }
.banner .list ul li { font-size: 1.2em; background-image: none; padding-left: 0; }
.banner .list ul li i { margin: 0 10px 0 0; color: var(--enshell-color-primary-background); }
/* Base .list ul/li -- the real component's own flex-wrap layout, bullet
   suppression (li display:inline-block, not the default list-item) and
   2-column width. Same gap already found and fixed on the homepage
   (home.css): only the banner-scoped icon override above was ported here,
   not these foundational rules it depends on -- without them the browser's
   default <ul><li> renders (block stacking + a native disc bullet, visible
   once padding-left:0 above removes the space that would normally hide it). */
.list ul, .list ol { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.list ul li { display: inline-block; padding: 5px 10px 5px 39px; margin: 0 0 5px 0; }
.list ul li:last-child, .list ol li:last-child { margin-bottom: 0; }
.list.list-col2 ul li, .list.list-col2 ol li { width: var(--enshell-column-2); }
.banner .banner-twocolumn { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; }
.banner .banner-twocolumn .banner-twocolumn-col1 { display: flex; justify-content: center; flex-direction: column; width: 55%; }
.banner .banner-twocolumn .banner-twocolumn-col2 { display: flex; justify-content: center; align-items: center; width: 40%; }
.banner .banner-twocolumn .banner-twocolumn-col2 a { position: relative; }
.banner .banner-twocolumn .banner-twocolumn-col2 a:hover img { opacity: 0.9; }
.banner .banner-buttons { display: flex; justify-content: center; flex-wrap: wrap; }
.banner .banner-buttons .button1 { margin: 5px 10px; }
.banner.banner-design2column .banner-heading,
.banner.banner-design2column .banner-text { text-align: left; }
.banner.banner-design2column .banner-buttons { justify-content: flex-start; }
.banner.banner-design2column.banner-designscreenshot .banner-twocolumn .banner-twocolumn-col1 { margin: 0 0 var(--enshell-spacing-parent) 0; }
.banner.banner-design2column.banner-designscreenshot .banner-twocolumn .banner-twocolumn-col2 { align-items: end; margin: var(--enshell-spacing-child) 0 0 0; }
.banner.banner-design2column.banner-designscreenshot picture::before {
	background-color: #d7d7d7;
	background: url("../img/hero/browsericons.png") 5px center no-repeat, linear-gradient(to bottom, #d7d7d7, #d0d0d0);
	background-size: auto 5px; border-bottom: #767676 1px solid; border-radius: 2px 2px 0 0; height: 9px; display: block; content: "";
}
.banner.banner-design2column.banner-designscreenshot .contentcontainer { padding-bottom: 0; }
/* Same per-page hero photo mechanism as the real site's own inline <style> (per-page background-image + .background rgba scrim). */
/* Per-page hero background. Previously set via an inline style="" custom
   property (--svc-banner-image), which the live server's CSP
   (style-src 'self', no 'unsafe-inline') silently blocks -- the inline
   attribute stays in the DOM but the browser never applies it, so every
   service-page hero photo was missing in production while working fine
   locally (no CSP header on the local dev server). Moved to one explicit
   class per page, set from this external stylesheet, which is unaffected
   by style-src 'self'. */
.banner.svc-banner .background { background: rgba(0, 0, 0, 0.5); }
.banner.svc-banner-alojamiento-web { background-image: url('/assets/img/hero/background-shared.jpg'); }
.banner.svc-banner-hosting-revendedores { background-image: url('/assets/img/hero/background-reseller.jpg'); }
.banner.svc-banner-servidores-vps { background-image: url('/assets/img/hero/background-vps.jpg'); }
.banner.svc-banner-cloud-hosting { background-image: url('/assets/img/hero/background-cloud.jpg'); }
.banner.svc-banner-servidores-dedicados { background-image: url('/assets/img/hero/background-dedicated.jpg'); }
.banner.svc-banner-diseno-web { background-image: url('/assets/img/hero/background-webdesign.jpg'); }
.banner.svc-banner-dominios { background-image: url('/assets/img/hero/background5.jpg'); }
.banner.svc-banner-complementos-hosting { background-image: url('/assets/img/hero/background-hostingaddons.webp'); }
.banner.svc-banner-certificados-ssl { background-image: url('/assets/img/hero/background.jpg'); }

/* ===== .banner-domainsearch (single-column hero domain search, dominios.html) ===== */
.banner-domainsearch { width: 50%; position: relative; margin: 0 auto; }
.banner-domainsearch input { font-size: 1.2em; height: 65px; }
.banner-domainsearch input[type="text"] {
	width: 70%; padding: 0 var(--enshell-spacing-inner);
	border: #000 1px solid;
	border-radius: var(--enshell-border-radius-default) 0 0 var(--enshell-border-radius-default);
	padding-left: 100px;
	background: var(--enshell-color-box-background);
	color: var(--enshell-color-box-foreground);
	caret-color: var(--enshell-color-box-foreground);
	text-shadow: none;
	-webkit-text-fill-color: var(--enshell-color-box-foreground);
}
.banner-domainsearch input[type="text"]::placeholder { color: var(--enshell-color-grey); opacity: 1; }
.banner-domainsearch input[type="text"]:-webkit-autofill {
	-webkit-text-fill-color: var(--enshell-color-box-foreground);
	box-shadow: 0 0 0 1000px var(--enshell-color-box-background) inset;
}
.banner-domainsearch input[type="submit"] { width: 30%; border-radius: 0 var(--enshell-border-radius-default) var(--enshell-border-radius-default) 0; }
.banner-domainsearch::before {
	content: "www.";
	position: absolute; left: 5px; top: 5px;
	font-size: 18px;
	background: var(--enshell-color-secondary-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-background-gradient-top) 0, var(--enshell-color-secondary-background-gradient-bottom) 100%);
	border-radius: var(--enshell-border-radius-default) 0 0 var(--enshell-border-radius-default);
	color: var(--enshell-color-secondary-foreground);
	line-height: 1; padding: 19px; text-shadow: none;
}
/* Real Glaze domain-search breakpoints, ported from layout.css. */
@media (max-width: 1100px) { .banner-domainsearch { width: 60%; } }
@media (max-width: 920px) { .banner-domainsearch { width: 70%; } }
@media (max-width: 790px) { .banner-domainsearch { width: 80%; } }
@media (max-width: 700px) { .banner-domainsearch { width: 100%; } }
@media (max-width: 550px) {
	.banner-domainsearch::before { display: none; }
	.banner-domainsearch input[type="text"] { padding: 0 var(--enshell-spacing-inner); padding-left: var(--enshell-spacing-inner); }
}

/* ===== Featured TLDs grid (dominios.html) -- no real Glaze CSS source exists for
   this (WHMCS core-styled, not part of layout.css); minimal treatment reusing
   existing design tokens, consistent with the rest of the real-ported site. ===== */
.featured-tlds-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--enshell-spacing-child); margin: 0 0 var(--enshell-spacing-parent) 0; }
.featured-tld {
	text-align: center; padding: var(--enshell-spacing-child);
	border: var(--enshell-color-box-background-border) 1px solid;
	border-radius: var(--enshell-border-radius-default);
	background: var(--enshell-color-box-background);
}
.featured-tld .featured-tld-image {
	display: block; width: 64px; height: 64px; object-fit: contain;
	margin: 0 auto 8px; transition: transform .5s ease;
}
.featured-tld:hover .featured-tld-image { transform: scale(1.1); }
@media (max-width: 650px) { .featured-tlds-container { grid-template-columns: repeat(2, 1fr); } }
.featured-tld .featured-tld-ext { font-size: 1.5em; font-weight: bold; color: var(--enshell-color-box-foreground-bold); margin: 0 0 8px 0; }
.featured-tld .featured-tld-price { color: var(--enshell-color-box-foreground); }
.featured-tld .featured-tld-price strong { color: var(--enshell-color-primary-background); }

/* ===== .linksbar (in-page jump nav) ===== */
.linksbar {
	background: var(--enshell-color-box-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-background-gradient-top) 0, var(--enshell-color-box-background-gradient-bottom) 100%);
	border-bottom: var(--enshell-color-box-background-border) var(--enshell-border-bottom-width-default) solid;
	padding: 3px 0;
}
.linksbar ul { margin: 0; text-align: center; list-style: none; padding: 0; }
.linksbar ul li { display: inline-block; font-size: 1.2em; font-weight: bold; }
.linksbar ul li a { display: block; padding: 10px 10px; color: var(--enshell-color-box-foreground-bold); border-right: var(--enshell-color-box-background-divider) 1px solid; text-decoration: none; }
.linksbar ul li:hover a { color: var(--enshell-color-primary-background); }
.linksbar ul li:last-child a { border-right: none; }

/* ===== .highlightbox (overview callout) ===== */
.highlightbox {
	display: flex; flex-direction: column;
	margin: 0 0 var(--enshell-spacing-parent) 0;
	border: var(--enshell-color-box-background-border) 1px solid;
	border-bottom-width: var(--enshell-border-bottom-width-default);
	background: var(--enshell-color-box-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-background-gradient-top) 0, var(--enshell-color-box-background-gradient-bottom) 100%);
	padding: var(--enshell-spacing-child);
	color: var(--enshell-color-box-foreground);
	border-radius: var(--enshell-border-radius-default);
}
.highlightbox a { color: var(--enshell-color-box-foreground); }
.highlightbox a:hover { color: var(--enshell-color-primary-background); }
.highlightbox p:last-child { margin-bottom: 0; }
/* Real theme has no paragraph width cap; base.css's global p{max-width:68ch}
   (meant for article/blog prose) was bleeding in here, confining the
   overview text to ~700px on the left and leaving a large empty strip on
   the right of the box. */
.highlightbox p { max-width: none; }

/* ===== .product-tables1 (plan comparison table) ===== */
:root {
	--enshell-product-tables1-box-features-background: #fff;
	--enshell-product-tables1-box-features-background-border: var(--enshell-color-box-background-border);
	--enshell-product-tables1-box-features-foreground: var(--enshell-color-box-foreground);
	--enshell-product-tables1-box-features-head: var(--enshell-color-box-background);
	--enshell-product-tables1-box-features-head-border: var(--enshell-color-box-head-background-border);
	--enshell-product-tables1-box-features-head-foreground: var(--enshell-color-box-foreground-bold);
	--enshell-product-tables1-box-features-background-divider: var(--enshell-color-box-background-divider);
}
.product-tables1 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 var(--enshell-spacing-parent) 0; }
/* Column-count width rules -- real theme only ever defines 3/4/5/6-col
   variants (verbatim from layout.css). 4col/6col had no rule at all here
   before, so boxes fell back to content-based auto width: with 4 plans
   that happened to still fit one row, but with 6 (servidores-dedicados)
   the 6th box ("Power") silently wrapped onto an orphaned second row. */
.product-tables1-3col .product-tables1-box.product-tables1-box-features { width: 30%; }
.product-tables1-3col .product-tables1-box { width: 23.33%; }
.product-tables1-4col .product-tables1-box.product-tables1-box-features { width: 27%; }
.product-tables1-4col .product-tables1-box { width: 18.25%; }
.product-tables1-5col .product-tables1-box.product-tables1-box-features { width: 20%; }
.product-tables1-5col .product-tables1-box { width: 16%; }
/* 6col has no room for a separate label column at any width -- the real
   theme hides it unconditionally (not just responsively) and shows the
   inline overfeat label on every box instead. */
.product-tables1-6col .product-tables1-box.product-tables1-box-features { display: none; }
.product-tables1-6col .product-tables1-box:last-child { border-radius: var(--enshell-border-radius-default); }
.product-tables1-6col .product-tables1-box {
	border-radius: var(--enshell-border-radius-default);
	width: 15%;
	border-width: 1px;
}
.product-tables1 .product-tables1-box.product-tables1-box-features {
	background: var(--enshell-product-tables1-box-features-background);
	border-radius: var(--enshell-border-radius-default) 0 0 var(--enshell-border-radius-default);
	border: var(--enshell-product-tables1-box-features-background-border) 1px solid;
	border-right-width: 0; border-bottom-width: var(--enshell-border-bottom-width-default);
	color: var(--enshell-product-tables1-box-features-foreground);
}
.product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head { background: var(--enshell-product-tables1-box-features-head); border-color: var(--enshell-product-tables1-box-features-head-border); }
.product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head .product-tables1-heading { color: var(--enshell-product-tables1-box-features-head-foreground); }
.product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head2 { background: var(--enshell-product-tables1-box-features-head); border-color: var(--enshell-product-tables1-box-features-head-border); }
.product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-head2 .product-tables1-heading2 { color: var(--enshell-product-tables1-box-features-head-foreground); }
.product-tables1 .product-tables1-box.product-tables1-box-features .product-tables1-features-list .product-tables1-features-list-item {
	text-align: left;
	background-image: url("../img/real-theme/bulleticon-glaze.png");
	background-position: left center; background-repeat: no-repeat; background-size: auto 20px;
	padding: 0 0 0 var(--enshell-spacing-child);
	border-color: var(--enshell-product-tables1-box-features-background-divider);
}
.product-tables1 .product-tables1-box { background: var(--enshell-color-box-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-background-gradient-top) 0, var(--enshell-color-box-background-gradient-bottom) 100%); border: var(--enshell-color-box-background-border) 1px solid; border-right-width: 0; border-bottom-width: var(--enshell-border-bottom-width-default); position: relative; overflow: hidden; color: var(--enshell-color-box-foreground); }
.product-tables1 .product-tables1-box:last-child { border-right-width: 1px; border-radius: 0 var(--enshell-border-radius-default) var(--enshell-border-radius-default) 0; }
.product-tables1 .product-tables1-box .product-tables1-head { background: var(--enshell-color-box-head-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-head-background-gradient-top) 0, var(--enshell-color-box-head-background-gradient-bottom) 100%); border-bottom: var(--enshell-color-box-head-background-border) 1px solid; display: block; height: 60px; line-height: 60px; overflow: hidden; }
.product-tables1 .product-tables1-box .product-tables1-head .product-tables1-heading { text-align: center; color: var(--enshell-color-box-head-foreground); margin: 0; padding: 0 25px; font-family: var(--enshell-font-heading); font-size: 1.7em; font-weight: bold; }
.product-tables1 .product-tables1-box .product-tables1-head2 { background: var(--enshell-color-box-head-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-head-background-gradient-top) 0, var(--enshell-color-box-head-background-gradient-bottom) 100%); border-top: var(--enshell-color-box-head-background-border) 1px solid; border-bottom: var(--enshell-color-box-head-background-border) 1px solid; display: block; height: 50px; line-height: 50px; overflow: hidden; }
.product-tables1 .product-tables1-box .product-tables1-head2 .product-tables1-heading2 { text-align: center; color: var(--enshell-color-box-head-foreground); font-family: var(--enshell-font-heading); font-size: 1.4em; font-weight: bold; margin: 0; padding: 0 25px; }
.product-tables1 .product-tables1-box .product-tables1-text { display: flex; justify-content: center; align-items: center; height: 77px; overflow: hidden; margin: 15px 0; padding: 0 25px; }
/* Web Design plan columns retain Glaze's component zones, but use a shared
   column flow so a naturally wrapping description cannot shift later rows. */
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) {
	display: flex;
	flex-direction: column;
}
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-head,
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text,
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text + .product-tables1-features-list,
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-price,
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-buttons,
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-head2 {
	flex-shrink: 0;
}
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text {
	box-sizing: border-box;
	height: auto;
	min-height: 9.6rem;
	overflow: visible;
}
/* These widths reflect the real plan-column changes and measured natural
   wrapping: 6.4rem through 1400px, 9.6rem through 1100px, and 11.2rem
   through 1080px. The two-column Glaze layout begins at 830px. */
.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-price { margin-bottom: 0; }
@media (max-width: 1400px) {
	.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text { min-height: 6.4rem; }
}
@media (max-width: 1100px) {
	.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text { min-height: 9.6rem; }
}
@media (max-width: 1080px) {
	.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text { min-height: 11.2rem; }
}
@media (max-width: 830px) {
	.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text { min-height: 6rem; }
}
@media (max-width: 700px) and (min-width: 601px) {
	.dw-plans > .product-tables1-box:not(.product-tables1-box-features) > .product-tables1-text { min-height: 6.4rem; }
}
.product-tables1 .product-tables1-box .product-tables1-features-list { padding: 0 25px; }
.product-tables1 .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { text-align: center; border-bottom: var(--enshell-color-box-background-divider) 1px solid; height: 47px; line-height: 47px; overflow: hidden; }
.product-tables1 .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { font-weight: bold; border-bottom: none; color: var(--enshell-color-box-foreground-bold); padding-bottom: 1px; display: none; }
/* 6col always shows the inline overfeat label (moved after the rule above
   so equal-specificity cascade order resolves in its favor -- it was
   previously declared earlier in the file and got silently overridden
   back to display:none by the base rule immediately above). */
.product-tables1-6col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; }
.product-tables1-6col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; }
.product-tables1 .product-tables1-box .product-tables1-price { margin: 20px 0; padding: 0 25px; overflow: hidden; text-align: center; font-size: 1.3em; font-weight: bold; color: var(--enshell-color-box-foreground-bold); }
.product-tables1 .product-tables1-box .product-tables1-price-priceprefix { display: block; margin: 0 0 10px 0; font-weight: normal; font-size: 0.8em; }
.product-tables1 .product-tables1-box .product-tables1-price-currencyprefix,
.product-tables1 .product-tables1-box .product-tables1-price-currencysuffix,
.product-tables1 .product-tables1-box .product-tables1-price-price,
.product-tables1 .product-tables1-box .product-tables1-price-term { display: inline; }
.product-tables1 .product-tables1-box .product-tables1-price-price { font-size: 1.2em; }
.product-tables1 .product-tables1-box .product-tables1-price-term { font-weight: normal; font-size: 0.6em; padding: 0 0 0 5px; }
.product-tables1 .product-tables1-box .product-tables1-buttons { height: 50px; line-height: 50px; text-align: center; margin: 20px 0; }
.product-tables1 .product-tables1-box .product-tables1-buttons .button1 { width: 70%; padding: 0; margin: 0; line-height: 30px; display: inline-block; }
.product-tables1 .product-tables1-box.product-tables1-highlight::after {
	position: absolute; top: 12px; right: -71px; width: 200px; padding: 10px 0;
	text-align: center; transform: rotate(45deg); font-size: 0.9em; font-weight: bold; line-height: 1; text-transform: uppercase;
}
.product-tables1 .product-tables1-box.product-tables1-highlight-hot::after { content: "hot"; background: var(--enshell-color-badge-hot-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-hot-background-gradient-top) 0, var(--enshell-color-badge-hot-background-gradient-bottom) 100%); color: var(--enshell-color-badge-hot-foreground); }
.product-tables1 .product-tables1-box.product-tables1-highlight-new::after { content: "new"; background: var(--enshell-color-badge-new-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-new-background-gradient-top) 0, var(--enshell-color-badge-new-background-gradient-bottom) 100%); color: var(--enshell-color-badge-new-foreground); }
.product-tables1 .product-tables1-box.product-tables1-highlight-popular::after { content: "popular"; background: var(--enshell-color-badge-popular-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-popular-background-gradient-top) 0, var(--enshell-color-badge-popular-background-gradient-bottom) 100%); color: var(--enshell-color-badge-popular-foreground); }
.product-tables1 .product-tables1-box.product-tables1-highlight-free::after { content: "free"; background: var(--enshell-color-badge-free-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-free-background-gradient-top) 0, var(--enshell-color-badge-free-background-gradient-bottom) 100%); color: var(--enshell-color-badge-free-foreground); }

/* ===== Hover (ported verbatim from layout.css -- this base rule was missing
   entirely; only the 6col hover-cancel exception below it had been ported,
   silently cancelling a rule that never existed, so pricing cards never
   reacted on hover at all). ===== */
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) {
	background: var(--enshell-color-box-active-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-background-gradient-top) 0, var(--enshell-color-box-active-background-gradient-bottom) 100%);
	border-color: var(--enshell-color-box-background-border);
	color: var(--enshell-color-box-active-foreground);
	margin-top: -5px;
	box-shadow: var(--enshell-shadow);
	cursor: pointer;
	transition: all 0.3s ease-in-out 0s;
}
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head {
	background: var(--enshell-color-box-active-head-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-head-background-gradient-top) 0, var(--enshell-color-box-active-head-background-gradient-bottom) 100%);
	border-color: var(--enshell-color-box-active-head-background-border);
}
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head .product-tables1-heading { color: var(--enshell-color-box-active-head-foreground); }
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head2 {
	background: var(--enshell-color-box-active-head-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-head-background-gradient-top) 0, var(--enshell-color-box-active-head-background-gradient-bottom) 100%);
	border-color: var(--enshell-color-box-active-head-background-border);
}
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-head2 .product-tables1-heading2 { color: var(--enshell-color-box-active-head-foreground); }
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-features-list .product-tables1-features-list-item { border-color: var(--enshell-color-box-active-background-divider); }
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { color: var(--enshell-color-box-active-foreground-bold); }
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-price { color: var(--enshell-color-box-active-foreground-bold); }
.product-tables1 .product-tables1-box:hover:not(.product-tables1-box-features) .product-tables1-buttons .button1 { transform: scale(1.1); transition-duration: 0.2s; }
/* 6col hover-cancel exception (real source: boxes are too narrow at 15%
   width for the -5px lift + shadow to look right). Must appear AFTER the
   base hover rule above -- equal specificity ties resolve by source
   order, so this was previously placed before the base rule and silently
   overridden by it. */
.product-tables1-6col .product-tables1-box:hover:not(.product-tables1-box-features) { margin-top: 0; box-shadow: none; }

/* ===== Real responsive breakpoints (ported verbatim from layout.css, not invented) ===== */
@media (max-width: 1400px) {
	.product-tables1-4col .product-tables1-box.product-tables1-box-features { display: none; }
	.product-tables1-4col .product-tables1-box:last-child { border-radius: var(--enshell-border-radius-default); }
	.product-tables1-4col .product-tables1-box { border-radius: var(--enshell-border-radius-default); width: 23.5%; border-width: 1px; }
	.product-tables1-4col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; }
	.product-tables1-4col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; }
	.product-tables1-6col .product-tables1-box { width: 18.4%; margin-bottom: var(--enshell-spacing-child); }
}
@media (max-width: 1130px) {
	.product-tables1-5col .product-tables1-box { width: 23%; margin-bottom: var(--enshell-spacing-child); }
	.product-tables1-6col .product-tables1-box { width: 23%; }
}
@media (max-width: 1100px) {
	.product-tables1-3col .product-tables1-box.product-tables1-box-features { display: none; }
	.product-tables1-3col .product-tables1-box:last-child { border-radius: var(--enshell-border-radius-default); }
	.product-tables1-3col .product-tables1-box { border-radius: var(--enshell-border-radius-default); width: 32%; border-width: 1px; }
	.product-tables1-3col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item { height: auto; line-height: 1.2em; padding: 10px 0; }
	.product-tables1-3col .product-tables1-box .product-tables1-features-list .product-tables1-features-list-item .product-tables1-features-list-item-overfeat { display: block; padding: 0 0 5px 0; }
}
@media (max-width: 920px) {
	.product-tables1-5col .product-tables1-box { width: 32%; }
	.product-tables1-6col .product-tables1-box { width: 32%; }
}
@media (max-width: 900px) {
	.linksbar ul a { padding: 10px 10px; }
}
@media (max-width: 830px) {
	.product-tables1-3col .product-tables1-box { width: 48%; margin-bottom: var(--enshell-spacing-child); }
	.product-tables1-4col .product-tables1-box { width: 48%; }
	.product-tables1-5col .product-tables1-box { width: 48%; }
	.product-tables1-6col .product-tables1-box { width: 48%; }
}
@media (max-width: 600px) {
	.product-tables1-3col .product-tables1-box,
	.product-tables1-4col .product-tables1-box,
	.product-tables1-5col .product-tables1-box,
	.product-tables1-6col .product-tables1-box { width: 100%; margin-bottom: var(--enshell-spacing-child); border-right-width: 1px; }
	.product-tables1 .product-tables1-box:last-child { margin-bottom: 0; }
}
@media (max-width: 480px) {
	.banner .banner-heading { font-size: 2em; }
}

/* ===== .product-boxes1 (individual add-on boxes) =====
   Keep this in parity with the repaired Glaze component in home.css:
   wrapped rows stretch to their tallest card and each card is a flex column,
   so variable Spanish copy is absorbed by the text zone instead of pulling
   its price/CTA upward. */
.product-boxes1 { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; align-items: stretch; margin: 0 0 var(--enshell-spacing-parent) 0; }
.product-boxes1 .product-boxes1-box {
	width: var(--enshell-column-3);
	background: var(--enshell-color-box-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-background-gradient-top) 0, var(--enshell-color-box-background-gradient-bottom) 100%);
	border: var(--enshell-color-box-background-border) 1px solid; border-top: none;
	border-bottom-width: var(--enshell-border-bottom-width-default);
	margin: 0 0 var(--enshell-spacing-child) 0; position: relative; overflow: hidden;
	color: var(--enshell-color-box-foreground); border-radius: var(--enshell-border-radius-default);
	display: flex; flex-direction: column;
}
.product-boxes1.product-boxes1-1col .product-boxes1-box { width: var(--enshell-column-1); }
.product-boxes1.product-boxes1-2col .product-boxes1-box { width: var(--enshell-column-2); }
.product-boxes1.product-boxes1-3col .product-boxes1-box { width: var(--enshell-column-3); }
.product-boxes1.product-boxes1-4col .product-boxes1-box { width: var(--enshell-column-4); }
.product-boxes1.product-boxes1-5col .product-boxes1-box { width: var(--enshell-column-5); }
.product-boxes1.product-boxes1-6col .product-boxes1-box { width: var(--enshell-column-6); }
.product-boxes1 .product-boxes1-box.product-boxes1-highlight::after {
	position: absolute; top: 12px; right: -71px; width: 200px; padding: 10px 0;
	text-align: center; transform: rotate(45deg); font-size: 0.9em; font-weight: bold; line-height: 1; text-transform: uppercase;
}
.product-boxes1 .product-boxes1-box.product-boxes1-highlight-hot::after { content: "hot"; background: var(--enshell-color-badge-hot-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-hot-background-gradient-top) 0, var(--enshell-color-badge-hot-background-gradient-bottom) 100%); color: var(--enshell-color-badge-hot-foreground); }
.product-boxes1 .product-boxes1-box.product-boxes1-highlight-new::after { content: "new"; background: var(--enshell-color-badge-new-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-new-background-gradient-top) 0, var(--enshell-color-badge-new-background-gradient-bottom) 100%); color: var(--enshell-color-badge-new-foreground); }
.product-boxes1 .product-boxes1-box.product-boxes1-highlight-popular::after { content: "popular"; background: var(--enshell-color-badge-popular-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-popular-background-gradient-top) 0, var(--enshell-color-badge-popular-background-gradient-bottom) 100%); color: var(--enshell-color-badge-popular-foreground); }
.product-boxes1 .product-boxes1-box.product-boxes1-highlight-free::after { content: "free"; background: var(--enshell-color-badge-free-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-free-background-gradient-top) 0, var(--enshell-color-badge-free-background-gradient-bottom) 100%); color: var(--enshell-color-badge-free-foreground); }
.product-boxes1 .product-boxes1-box .product-boxes1-head { background: var(--enshell-color-box-head-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-head-background-gradient-top) 0, var(--enshell-color-box-head-background-gradient-bottom) 100%); border-bottom: var(--enshell-color-box-head-background-border) 1px solid; width: 100%; padding: var(--enshell-spacing-inner); min-height: 114px; display: flex; align-items: center; justify-content: center; }
.product-boxes1 .product-boxes1-box .product-boxes1-head .product-boxes1-heading { width: 100%; margin: 0; color: var(--enshell-color-box-head-foreground); text-shadow: var(--enshell-color-box-head-foreground-shadow) 1px 1px; font-size: 1.6em; }
/* Real rule is white-space:nowrap (English headings are short enough to fit);
   longer Spanish translations ("Protección avanzada de correo") were being
   hard-clipped by the box's overflow:hidden instead of wrapping. */
.product-boxes1 .product-boxes1-box .product-boxes1-head { white-space: normal; }
.product-boxes1 .product-boxes1-box .product-boxes1-text { width: 100%; padding: var(--enshell-spacing-inner); text-align: center; flex: 1 1 auto; }
.product-boxes1 .product-boxes1-box .product-boxes1-text p:last-child { margin-bottom: 0; }
.product-boxes1 .product-boxes1-box .product-boxes1-image { margin: 0 auto var(--enshell-spacing-inner) auto; display: table; }
.product-boxes1 .product-boxes1-box .product-boxes1-image img { max-height: 50px; }
.product-boxes1 .product-boxes1-box .product-boxes1-image i { font-size: 2.5em; margin: 0; }
.product-boxes1 .product-boxes1-box .product-boxes1-price { background: var(--enshell-color-box-footer-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-footer-background-gradient-top) 0, var(--enshell-color-box-footer-background-gradient-bottom) 100%); border-top: var(--enshell-color-box-footer-background-border) 1px solid; border-bottom: var(--enshell-color-box-footer-background-border) 1px solid; width: 100%; padding: 20px var(--enshell-spacing-inner); text-align: center; white-space: nowrap; color: var(--enshell-color-box-footer-foreground); font-weight: bold; font-size: 1.6em; }
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-free { text-transform: uppercase; }
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-priceprefix,
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-price,
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencyprefix,
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencysuffix,
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-term { display: inline; }
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-priceprefix { padding-right: 10px; font-weight: normal; font-size: 0.7em; }
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencyprefix { font-weight: normal; font-size: 0.7em; }
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-currencysuffix { padding-left: 5px; font-weight: normal; font-size: 0.7em; }
.product-boxes1 .product-boxes1-box .product-boxes1-price .product-boxes1-price-term { padding-left: 10px; font-weight: normal; font-size: 0.7em; }
.product-boxes1 .product-boxes1-box .product-boxes1-heading2 { background: var(--enshell-color-box-footer-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-footer-background-gradient-top) 0, var(--enshell-color-box-footer-background-gradient-bottom) 100%); border-top: var(--enshell-color-box-footer-background-border) 1px solid; border-bottom: var(--enshell-color-box-footer-background-border) 1px solid; width: 100%; padding: 10px var(--enshell-spacing-child); text-align: center; font-weight: bold; font-size: 1.2em; color: var(--enshell-color-box-footer-foreground); white-space: nowrap; }
.product-boxes1 .product-boxes1-box .product-boxes1-features { padding: 20px; }
.product-boxes1 .product-boxes1-box .product-boxes1-features ul { margin: 0; }
.product-boxes1 .product-boxes1-box .product-boxes1-features ul li { text-align: center; width: 100%; display: inline-block; border-bottom: var(--enshell-color-box-background-divider) 1px solid; padding: 10px 0; font-size: 1.2em; }
.product-boxes1 .product-boxes1-box .product-boxes1-features ul li:first-child { padding-top: 0; }
.product-boxes1 .product-boxes1-box .product-boxes1-features ul li:last-child { border: none; padding-bottom: 0; }
.product-boxes1 .product-boxes1-box .product-boxes1-features ul li .product-boxes1-featuretop { font-weight: bold; display: block; padding: 0 0 5px 0; }
.product-boxes1 .product-boxes1-box .product-boxes1-features ul li strong { font-weight: bold; color: var(--enshell-color-primary-background); }
.product-boxes1 .product-boxes1-box .product-boxes1-buttons { padding: var(--enshell-spacing-child); display: flex; justify-content: center; flex-wrap: wrap; }
.product-boxes1 .product-boxes1-box .product-boxes1-buttons .button1 { margin: 5px; }
.product-boxes1 .product-boxes1-box:hover { background: var(--enshell-color-box-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-background-gradient-top) 0, var(--enshell-color-box-active-background-gradient-bottom) 100%); border-color: var(--enshell-color-box-active-background-border); color: var(--enshell-color-box-active-foreground); }
.product-boxes1 .product-boxes1-box:hover .product-boxes1-head {
	background: var(--enshell-color-box-active-head-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-head-background-gradient-top) 0, var(--enshell-color-box-active-head-background-gradient-bottom) 100%);
	border-color: var(--enshell-color-box-active-head-background-border);
}
.product-boxes1 .product-boxes1-box:hover .product-boxes1-head .product-boxes1-heading { color: var(--enshell-color-box-active-head-foreground); text-shadow: var(--enshell-color-box-active-head-foreground-shadow) 1px 1px; }
.product-boxes1 .product-boxes1-box:hover .product-boxes1-price {
	background: var(--enshell-color-box-active-footer-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-footer-background-gradient-top) 0, var(--enshell-color-box-active-footer-background-gradient-bottom) 100%);
	border-color: var(--enshell-color-box-active-footer-background-border);
	color: var(--enshell-color-box-active-footer-foreground);
}
.product-boxes1 .product-boxes1-box:hover .product-boxes1-heading2 {
	background: var(--enshell-color-box-active-footer-background);
	background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-footer-background-gradient-top) 0, var(--enshell-color-box-active-footer-background-gradient-bottom) 100%);
	border-color: var(--enshell-color-box-active-footer-background-border);
	color: var(--enshell-color-box-active-footer-foreground);
}
.product-boxes1 .product-boxes1-box:hover .product-boxes1-features ul li { border-color: var(--enshell-color-box-active-background-divider); }

/* Match the real Glaze box-grid breakpoints. These responsive rules existed
   in home.css but were missing from the service-page component stylesheet. */
@media (max-width: 1000px) {
	.product-boxes1 .product-boxes1-box,
	.product-boxes1.product-boxes1-3col .product-boxes1-box { width: var(--enshell-column-2); }
}
@media (max-width: 650px) {
	.product-boxes1 .product-boxes1-box,
	.product-boxes1.product-boxes1-3col .product-boxes1-box { width: var(--enshell-column-1); }
}

/* ===== .icon-check / .icon-cross (product-tables1 boolean feature rows) ===== */
.icon-check { color: var(--enshell-color-green); }
.icon-cross { color: var(--enshell-color-red); }

/* ===== SSL feature checklist (certificados-ssl.html gridboxes1-text icon list) ===== */
.gridboxes1-text ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.gridboxes1-text ul li { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 0; }
.gridboxes1-text ul li img { width: 18px; height: 16px; flex-shrink: 0; }

/*
  Complementos de hosting: align the internal product-card zones rather
  than only equalizing the outer flex-row height. Shared minimums preserve
  the existing Glaze markup and keep descriptions/features uncropped.
*/
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-head {
	min-height: 115px;
	box-sizing: border-box;
}
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-text {
	min-height: 154px;
	box-sizing: border-box;
	flex: 0 0 auto;
}
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-image {
	min-height: 74px;
	box-sizing: border-box;
}
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-heading2 {
	min-height: 48px;
	box-sizing: border-box;
}
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-features {
	min-height: 260px;
	box-sizing: border-box;
}
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-price {
	min-height: 71px;
	box-sizing: border-box;
}
main .product-boxes1-addons > .product-boxes1-box .product-boxes1-buttons {
	min-height: 114px;
	box-sizing: border-box;
}

@media (max-width: 650px) {
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-head,
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-text,
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-image,
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-heading2,
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-features,
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-price,
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-buttons {
		min-height: 0;
	}
}

@media (min-width: 1001px) and (max-width: 1100px) {
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-head {
		min-height: 147px;
	}
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-text {
		min-height: 178px;
	}
	main .product-boxes1-addons > .product-boxes1-box .product-boxes1-features {
		min-height: 286px;
	}
}