/* =============================================================================
   Sugurú — hoja de estilos principal

   Los valores vienen de la tabla de tokens del handoff. Todo lo que se repite
   está como custom property para poder ajustar la marca desde un solo sitio.
   Un único punto de corte: 760px.
   ========================================================================== */

/* -----------------------------------------------------------------  Tokens  */
:root {
	/* Marca */
	--verde:            #90e64a;
	--verde-hover:      #7fd836;
	--verde-texto:      #143a2e;
	--azul:             #294f96;
	--azul-hover:       #22427f;
	--petroleo:         #163c44;
	--petroleo-pie:     #0f2d33;
	--teal:             #288b85;

	/* Texto */
	--texto:            #163c44;
	--texto-cuerpo:     #3f5a55;
	--texto-suave:      #5b746f;
	--texto-tenue:      #7c918c;
	--texto-tenue-2:    #9fb3ad;
	--sobre-oscuro:     #dff3ea;
	--sobre-oscuro-2:   #cfe1db;
	--sobre-oscuro-3:   #bcd2cc;
	--sobre-oscuro-4:   #9fbbb3;
	--pie-creditos:     #6e8a83;

	/* Superficies */
	--borde:            #eef2ef;
	--borde-boton:      #dfe7f3;
	--suave-verde:      #eaf6f3;
	--suave-verde-2:    #f1f7f4;
	--suave-verde-3:    #eaf7df;
	--suave-verde-bord: #e3efe9;
	--suave-azul:       #eaf1fb;
	--suave-teal:       #e7f2f0;
	--suave-crema:      #fbf7e6;
	--check:            #3f9a1f;

	/* Redes */
	--whatsapp:         #25d366;
	--facebook:         #1877f2;
	--tiktok:           #010101;
	--instagram:        linear-gradient(135deg, #f09433, #dc2743, #bc1888);

	/* Tipografía */
	--display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
	--cuerpo:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Escala tipográfica: fluida entre el valor móvil y el de escritorio */
	--fs-h1-home: clamp(33px, 4.4vw + 12px, 54px);
	--fs-h1:      clamp(29px, 3.6vw + 12px, 46px);
	--fs-h1-blog: clamp(29px, 3.4vw + 12px, 44px);
	--fs-h2:      clamp(27px, 2.6vw + 14px, 38px);
	--fs-h2-sec:  clamp(26px, 2.4vw + 14px, 36px);
	--fs-h2-int:  clamp(24px, 1.4vw + 18px, 32px);

	/* Sombras */
	--sombra-tarjeta:       0 20px 44px rgba(22, 60, 68, .12);
	--sombra-tarjeta-blog:  0 18px 40px rgba(22, 60, 68, .10);
	--sombra-suave:         0 10px 30px rgba(22, 60, 68, .06);
	--sombra-hero:          0 26px 60px rgba(22, 60, 68, .22);
	--sombra-imagen:        0 22px 50px rgba(22, 60, 68, .20);
	--sombra-cta:           0 10px 26px rgba(144, 230, 74, .40);
	--sombra-nav-cta:       0 6px 18px rgba(144, 230, 74, .40);
	--sombra-whatsapp:      0 10px 28px rgba(37, 211, 102, .50);
	--sombra-redes:         0 10px 28px rgba(41, 79, 150, .50);
	--sombra-plan:          0 24px 56px rgba(41, 79, 150, .30);

	/* Layout */
	--ancho:      1200px;
	--ancho-serv: 1180px;
	--ancho-med:  1080px;
	--ancho-est:  980px;
	--gutter:     24px;

	/* --------------------------------------------------------------------
	   Contraste: cinco tonos del manual de marca no llegan a WCAG AA (4.5:1)
	   en tamaños pequeños. Se respetan los valores del diseño; si el cliente
	   quiere cumplir AA, basta con descomentar este bloque.

	   --texto-tenue:    #63786f;  (hoy #7c918c → 3.34:1)
	   --texto-tenue-2:  #63786f;  (hoy #9fb3ad → 2.20:1)
	   --teal:           #1f7a74;  (hoy #288b85 → 4.10:1)
	   --pie-creditos:   #86a29b;  (hoy #6e8a83 → 3.90:1 sobre #0f2d33)
	   y en .paleta-crema: --pal-eyebrow: #7d6410; (hoy #9a7b15 → 3.75:1)
	   -------------------------------------------------------------------- */

	/* Paleta por defecto de las vistas de servicio (Cerrajería) */
	--pal-hero:    linear-gradient(170deg, #eaf1fb, #f6f9ff);
	--pal-fondo:   var(--suave-azul);
	--pal-eyebrow: var(--azul);
	--pal-icono:   var(--azul);
	--pal-caja:    var(--suave-azul);
	--pal-borde:   #d7e3f7;
	--pal-blob:    var(--verde);
	--pal-blob-inset:  6%;
	--pal-blob-radio:  50% 50% 48% 52%;
}

/* Paletas de las otras dos vistas de servicio. */
.paleta-teal {
	--pal-hero:    linear-gradient(170deg, #e7f2f0, #f4faf8);
	--pal-fondo:   var(--suave-teal);
	--pal-eyebrow: var(--teal);
	--pal-icono:   var(--teal);
	--pal-caja:    var(--suave-teal);
	--pal-borde:   #cfe4e0;
	--pal-blob:    transparent;
	--pal-blob-inset:  8%;
	--pal-blob-radio:  50%;
}

.paleta-crema {
	--pal-hero:    linear-gradient(170deg, #fbf7e6, #fffdf3);
	--pal-fondo:   var(--suave-crema);
	--pal-eyebrow: #9a7b15;
	--pal-icono:   var(--azul);
	--pal-caja:    var(--suave-crema);
	--pal-borde:   #ede3c2;
	--pal-blob:    var(--azul);
	--pal-blob-inset:  8%;
	--pal-blob-radio:  48% 52% 50% 50%;
}

/* ------------------------------------------------------------------  Base  */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: #fff;
	color: var(--texto);
	font-family: var(--cuerpo);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--azul); }

button { font-family: inherit; }

h1, h2, h3, h4 {
	font-family: var(--display);
	color: var(--texto);
	margin: 0;
}

p { margin: 0; }

/* Foco visible y coherente en todo el sitio. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--azul);
	outline-offset: 3px;
	border-radius: 6px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--verde);
	color: var(--verde-texto);
	padding: 12px 20px;
	border-radius: 0 0 12px 0;
	font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------  Animaciones */
@keyframes floaty {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

@keyframes pulseRing {
	0%   { box-shadow: 0 0 0 0 rgba(144, 230, 74, .55); }
	70%  { box-shadow: 0 0 0 16px rgba(144, 230, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(144, 230, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ----------------------------------------------------------  Utilidades  */
.contenedor {
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.contenedor--servicios { max-width: var(--ancho-serv); }
.contenedor--medio     { max-width: var(--ancho-med); }
.contenedor--estrecho  { max-width: var(--ancho-est); }

.eyebrow {
	display: block;
	color: var(--teal);
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 13px;
}
.eyebrow--claro { color: var(--verde); }
.eyebrow--paleta { color: var(--pal-eyebrow); }

.titulo {
	font-family: var(--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	line-height: 1.1;
	color: var(--texto);
}
.titulo--h1      { font-size: var(--fs-h1); line-height: 1.04; }
.titulo--h1-home { font-size: var(--fs-h1-home); line-height: 1.04; }
.titulo--h1-blog { font-size: var(--fs-h1-blog); line-height: 1.06; }
.titulo--h2      { font-size: var(--fs-h2); }
.titulo--h2-sec  { font-size: var(--fs-h2-sec); }
.titulo--h2-int  { font-size: var(--fs-h2-int); }
.titulo--claro   { color: #fff; }

/* La pastilla de marca: una palabra destacada dentro del título. */
.hl {
	background: var(--azul);
	color: #fff;
	border-radius: 12px;
	padding: 0 12px;
	display: inline-block;
}
.hl--rotada { border-radius: 14px; padding: 0 14px; transform: rotate(-1.5deg); }
.hl--ancha  { padding: 0 16px; }
.hl--verde  { background: var(--verde); color: var(--verde-texto); }

/* Énfasis dentro de párrafos (misma sintaxis de asteriscos, sin pastilla). */
.enfasis        { font-weight: 600; color: var(--texto); }
.enfasis--verde { font-weight: 600; color: var(--verde); background: none; padding: 0; }

.parrafo {
	color: var(--texto-suave);
	font-weight: 300;
	line-height: 1.6;
	font-size: 16.5px;
}
.parrafo--hero  { color: var(--texto-cuerpo); font-size: 18px; max-width: 480px; }
.parrafo--claro { color: var(--sobre-oscuro-2); }

.seccion-encabezado {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 46px;
}
.seccion-encabezado .titulo { margin-top: 12px; }
.seccion-encabezado .parrafo { margin-top: 14px; }

/* ------------------------------------------------------------------ Botones */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border-radius: 32px;
	padding: 16px 28px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background .2s, border-color .2s, transform .2s, color .2s;
}

.boton--verde {
	background: var(--verde);
	color: var(--verde-texto);
	box-shadow: var(--sombra-cta);
}
.boton--verde:hover { background: var(--verde-hover); }

.boton--linea {
	background: #fff;
	color: var(--azul);
	border: 2px solid var(--borde-boton);
	padding: 14px 26px;
}
.boton--linea:hover { border-color: var(--azul); }

.boton--fantasma {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	padding: 15px 27px;
}
.boton--fantasma:hover { background: rgba(255, 255, 255, .2); }

.boton--bloque { width: 100%; }

/* Dos botones del diseño van sin el halo verde: el de cobertura y el de cada plan. */
.boton--sin-sombra { box-shadow: none; }

.boton--suave {
	background: var(--suave-verde-2);
	color: var(--azul);
	box-shadow: none;
}
.boton--suave:hover { background: var(--suave-verde-bord); }

.botones {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 30px;
}
.botones--centrados { justify-content: center; }

/* -------------------------------------------------------------------- Chips */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.chips--centrados { justify-content: center; gap: 12px; }

.chip {
	background: var(--suave-verde-2);
	border: 1px solid var(--suave-verde-bord);
	color: #2f4f49;
	border-radius: 30px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 500;
}

.chip--dano {
	background: #fff;
	border-color: var(--pal-borde);
	padding: 11px 18px;
	font-size: 14.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.chip--dano .icon { color: var(--check); flex: none; }

/* ------------------------------------------------------------------ Imagen */
.suguru-img { display: block; width: 100%; }

.suguru-img.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 200px;
	aspect-ratio: 16 / 10;
	background: repeating-linear-gradient(45deg, #eef3f1, #eef3f1 12px, #e6ede9 12px, #e6ede9 24px);
	color: var(--texto-tenue);
	font-size: 13px;
	font-weight: 500;
	padding: 20px;
}
.suguru-img.placeholder span { max-width: 22ch; }

/* =========================================================  BARRA SUPERIOR  */
.topbar {
	background: var(--petroleo);
	color: var(--sobre-oscuro);
	font-size: 13.5px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 26px;
	padding: 8px 20px;
	flex-wrap: wrap;
}
.topbar a { text-decoration: none; color: var(--sobre-oscuro); }
.topbar a.topbar__destacado { color: var(--verde); font-weight: 600; }
.topbar__aviso { display: flex; align-items: center; gap: 8px; }
.topbar__punto {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--verde);
	display: inline-block;
	flex: none;
	animation: pulseRing 2s infinite;
}
.topbar__sep { opacity: .4; }

/* ================================================================== NAV  */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--borde);
	transition: transform .35s ease;
	will-change: transform;
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__interior {
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--gutter);
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 36px; width: auto; display: block; }
.nav__logo .site-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 24px;
	color: var(--verde);
	text-decoration: none;
	letter-spacing: .5px;
}

.nav__links { display: flex; align-items: center; gap: 26px; }

.nav__link {
	position: relative;
	font-size: 15px;
	font-weight: 500;
	color: var(--texto);
	text-decoration: none;
	padding: 6px 0;
	transition: color .2s;
}
.nav__link:hover { color: var(--azul); }

.nav__underline {
	position: absolute;
	left: 0; right: 0;
	bottom: -4px;
	height: 3px;
	border-radius: 3px;
	background: var(--verde);
}

.nav__acciones { display: flex; align-items: center; gap: 12px; }

.nav__cta {
	flex: none;
	background: var(--verde);
	color: var(--verde-texto);
	border-radius: 30px;
	padding: 12px 22px;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: var(--sombra-nav-cta);
	transition: background .2s;
}
.nav__cta:hover { background: var(--verde-hover); }

.nav__hamburguesa {
	display: none;
	flex: none;
	width: 46px; height: 46px;
	border-radius: 13px;
	background: var(--suave-verde-2);
	border: 1px solid var(--suave-verde-bord);
	color: var(--texto);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.nav__hamburguesa .icon--cerrar { display: none; }
.nav__hamburguesa[aria-expanded="true"] .icon--menu   { display: none; }
.nav__hamburguesa[aria-expanded="true"] .icon--cerrar { display: block; }

.menu-movil {
	display: none;
	border-top: 1px solid var(--borde);
	background: #fff;
	padding: 8px 16px 16px;
	flex-direction: column;
	gap: 2px;
}
.menu-movil.is-open { display: flex; }

.menu-movil__link {
	font-size: 16px;
	font-weight: 500;
	color: var(--texto);
	text-decoration: none;
	padding: 14px 8px;
	border-radius: 10px;
	transition: background .2s;
}
.menu-movil__link:hover,
.menu-movil__link.is-active { background: var(--suave-verde-2); }

/* ==========================================================  FLOTANTES  */
.flotante {
	position: fixed;
	right: 22px;
	width: 60px; height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: #fff;
	transition: transform .2s;
}
.flotante:hover { transform: scale(1.06); }

.flotante--whatsapp {
	bottom: 22px;
	z-index: 60;
	background: var(--whatsapp);
	box-shadow: var(--sombra-whatsapp);
	animation: pulseRing 2.4s infinite;
}

.redes-flotante {
	position: fixed;
	right: 22px;
	bottom: 92px;
	z-index: 61;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 12px;
}

.redes-flotante__boton {
	width: 60px; height: 60px;
	border-radius: 50%;
	background: var(--azul);
	box-shadow: var(--sombra-redes);
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s, background .2s;
}
.redes-flotante__boton:hover { transform: scale(1.06); background: var(--azul-hover); }
.redes-flotante__boton .icon--cerrar { display: none; }
.redes-flotante__boton[aria-expanded="true"] .icon--compartir { display: none; }
.redes-flotante__boton[aria-expanded="true"] .icon--cerrar    { display: block; }

.redes-flotante__lista {
	display: none;
	flex-direction: column-reverse;
	gap: 12px;
}
.redes-flotante__lista.is-open { display: flex; }

.redes-flotante__item {
	width: 48px; height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform .15s;
	box-shadow: 0 8px 20px rgba(22, 60, 68, .22);
}
.redes-flotante__item:hover { transform: scale(1.12); }
.redes-flotante__item--instagram { background: var(--instagram); }
.redes-flotante__item--facebook  { background: var(--facebook); }
.redes-flotante__item--tiktok    { background: var(--tiktok); }

/* =================================================================  PIE  */
.pie {
	background: var(--petroleo-pie);
	color: var(--sobre-oscuro-2);
}

.pie__grid {
	max-width: var(--ancho);
	margin-inline: auto;
	padding: 60px var(--gutter) 30px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.pie__logo img { height: 34px; width: auto; display: block; }
.pie__logo .site-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	color: var(--verde);
	text-decoration: none;
}

.pie__desc {
	font-size: 14px;
	color: var(--sobre-oscuro-4);
	font-weight: 300;
	max-width: 280px;
	margin-top: 16px;
	line-height: 1.6;
}

.pie__redes { display: flex; gap: 10px; margin-top: 18px; }
.pie__red {
	width: 38px; height: 38px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .07);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sobre-oscuro-2);
	transition: background .2s, color .2s;
}
.pie__red:hover { background: var(--verde); color: var(--verde-texto); }

.pie__titulo {
	font-family: var(--display);
	font-weight: 600;
	font-size: 16px;
	color: #fff;
	margin: 0 0 16px;
}

.pie__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie__lista a,
.pie__contacto a {
	color: var(--sobre-oscuro-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 300;
	transition: color .2s;
}
.pie__lista a:hover,
.pie__contacto a:hover { color: var(--verde); }

.pie__contacto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pie__contacto li { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.pie__legal {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 18px var(--gutter) 0;
}
.pie__legal-lista {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--ancho);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}
.pie__legal-lista a {
	color: var(--sobre-oscuro-4);
	text-decoration: none;
	font-size: 13px;
	font-weight: 300;
	transition: color .2s;
}
.pie__legal-lista a:hover { color: var(--verde); }

.pie__legal + .pie__creditos { border-top: 0; padding-top: 14px; }

.pie__creditos {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 20px var(--gutter);
	text-align: center;
	font-size: 13px;
	color: var(--pie-creditos);
}

/* =============================================================  INICIO  */
.hero-home {
	position: relative;
	background: linear-gradient(170deg, #eaf6f3 0%, #f4fbef 60%, #ffffff 100%);
	overflow: hidden;
}
.hero-home__forma-1 {
	position: absolute;
	top: -120px; right: -80px;
	width: 520px; height: 520px;
	border-radius: 48% 52% 60% 40%;
	background: rgba(40, 139, 133, .07);
}
.hero-home__forma-2 {
	position: absolute;
	bottom: -160px; left: -120px;
	width: 420px; height: 420px;
	border-radius: 50%;
	background: rgba(144, 230, 74, .10);
}
.hero-home__grid {
	position: relative;
	max-width: var(--ancho);
	margin-inline: auto;
	padding: 72px var(--gutter) 84px;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: center;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #d8ece2;
	color: var(--teal);
	font-weight: 600;
	font-size: 13px;
	padding: 7px 15px;
	border-radius: 30px;
	letter-spacing: .3px;
}
.badge--paleta { color: var(--pal-eyebrow); border-color: var(--pal-borde); }

.hero-home__titulo { margin-top: 20px; }
.hero-home .parrafo--hero { margin-top: 22px; }

.stats {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 34px;
}
.stats__sep { width: 1px; background: #d8e6e1; align-self: stretch; }
.stats__valor {
	font-family: var(--display);
	font-weight: 700;
	font-size: 26px;
	color: var(--texto);
	line-height: 1.2;
}
.stats__texto { font-size: 13px; color: var(--texto-suave); }

.hero-home__media { position: relative; }
.hero-home__blob {
	position: absolute;
	inset: 8% 6% 2% 8%;
	border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
	background: var(--verde);
}
.hero-home__foto {
	position: relative;
	border-radius: 40px 40px 40px 90px;
	overflow: hidden;
	box-shadow: var(--sombra-hero);
	background: #e9efee;
}
.hero-home__foto .suguru-img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: var(--foco, 50% 50%);
}

.hero-home__tarjeta {
	position: absolute;
	left: -22px; bottom: 36px;
	background: #fff;
	border-radius: 18px;
	padding: 14px 18px;
	box-shadow: 0 14px 34px rgba(22, 60, 68, .16);
	display: flex;
	align-items: center;
	gap: 12px;
	animation: floaty 4s ease-in-out infinite;
}
.hero-home__tarjeta-icono {
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--suave-verde-3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.hero-home__tarjeta-valor {
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	color: var(--texto);
}
.hero-home__tarjeta-texto { font-size: 12px; color: var(--texto-suave); }

.hero-home__pill {
	position: absolute;
	right: -10px; top: 24px;
	background: var(--azul);
	color: #fff;
	border-radius: 16px;
	padding: 12px 16px;
	box-shadow: 0 14px 30px rgba(41, 79, 150, .3);
	font-size: 13px;
	font-weight: 500;
	animation: floaty 5s ease-in-out infinite;
}

/* Servicios (tarjetas de línea) */
.seccion-servicios { padding: 88px 0 30px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

.tarjeta-servicio {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 24px;
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	transition: transform .2s, box-shadow .2s;
}
.tarjeta-servicio:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra-tarjeta);
}
.caja-icono {
	width: 58px; height: 58px;
	border-radius: 18px;
	background: var(--suave-verde-3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--azul);
	flex: none;
}
.tarjeta-servicio h3 { font-weight: 600; font-size: 21px; }
.tarjeta-servicio p  { font-size: 14.5px; color: var(--texto-suave); line-height: 1.55; font-weight: 300; }
.enlace-mas {
	color: var(--azul);
	font-weight: 600;
	font-size: 14px;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.enlace-mas .icon { width: 16px; height: 16px; }

/* Cómo funciona */
.seccion-pasos {
	position: relative;
	background: var(--petroleo);
	color: #fff;
	padding: 80px 0;
	overflow: hidden;
}
.seccion-pasos__forma {
	position: absolute;
	top: -140px; left: -100px;
	width: 380px; height: 380px;
	border-radius: 50%;
	background: rgba(144, 230, 74, .07);
}
.seccion-pasos .contenedor { position: relative; }
.seccion-pasos .seccion-encabezado { max-width: 760px; }
.seccion-pasos .seccion-encabezado .parrafo { margin-top: 16px; }

.tarjeta-paso {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 22px;
	padding: 30px 24px;
}
.tarjeta-paso__num {
	font-family: var(--display);
	font-weight: 700;
	font-size: 34px;
	color: var(--verde);
	line-height: 1;
}
.tarjeta-paso h3 {
	font-size: 19px;
	font-weight: 600;
	color: #fff;
	margin: 12px 0 8px;
}
.tarjeta-paso p { font-size: 14.5px; color: var(--sobre-oscuro-3); font-weight: 300; line-height: 1.55; }

/* Cobertura */
.seccion-cobertura {
	padding: 84px 0;
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 54px;
	align-items: center;
}
.seccion-cobertura .titulo { margin-top: 12px; }
.seccion-cobertura .parrafo { margin-top: 14px; }

/* Testimonios */
.seccion-testimonios { background: var(--suave-verde); padding: 80px 0; }

.tarjeta-testimonio {
	background: #fff;
	border-radius: 22px;
	padding: 30px 26px;
	box-shadow: var(--sombra-suave);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tarjeta-testimonio__estrellas {
	color: var(--verde);
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 1;
}
.tarjeta-testimonio__cita {
	font-size: 15.5px;
	color: var(--texto-cuerpo);
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
	flex: 1;
}
.tarjeta-testimonio__autor { display: flex; align-items: center; gap: 12px; }
.tarjeta-testimonio__avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--petroleo);
	color: var(--verde);
	font-family: var(--display);
	font-weight: 700;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.tarjeta-testimonio__nombre { display: block; font-size: 15px; font-weight: 600; }
.tarjeta-testimonio__ciudad { display: block; font-size: 13px; color: var(--texto-tenue); }

/* Blog en el Inicio */
.seccion-blog { padding: 84px 0; }
.seccion-blog__encabezado {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.seccion-blog__encabezado .titulo { margin-top: 12px; }

/* Banner CTA */
.banner-cta { padding-inline: var(--gutter); margin-bottom: 84px; }
.banner-cta__interior {
	position: relative;
	overflow: hidden;
	max-width: var(--ancho);
	margin-inline: auto;
	background: linear-gradient(120deg, var(--azul), var(--petroleo));
	border-radius: 32px;
	padding: 58px 56px;
}
.banner-cta__forma {
	position: absolute;
	top: -120px; right: -60px;
	width: 340px; height: 340px;
	border-radius: 50%;
	background: rgba(144, 230, 74, .16);
}
.banner-cta__contenido { position: relative; max-width: 620px; }
.banner-cta__contenido .parrafo { color: #cdd9ee; font-size: 17px; margin-top: 16px; }

/* ==================================================  VISTAS DE SERVICIO  */
.hero-servicio {
	position: relative;
	background: var(--pal-hero);
	overflow: hidden;
}
.hero-servicio__forma {
	position: absolute;
	top: -140px; right: -90px;
	width: 460px; height: 460px;
	border-radius: 48% 52% 60% 40%;
	background: rgba(22, 60, 68, .04);
}
.hero-servicio__grid {
	position: relative;
	max-width: var(--ancho);
	margin-inline: auto;
	padding: 64px var(--gutter) 72px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.hero-servicio__titulo { margin-top: 20px; }
.hero-servicio .parrafo--hero { margin-top: 20px; font-size: 17.5px; max-width: 520px; }

.hero-servicio__media { position: relative; }
.hero-servicio__blob {
	position: absolute;
	inset: var(--pal-blob-inset, 6%);
	border-radius: var(--pal-blob-radio, 50%);
	background: var(--pal-blob);
}
.hero-servicio__foto {
	position: relative;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: var(--sombra-imagen);
	background: #fff;
}
/* Los banners de marca son 1920×700 (2.74:1) con espacio reservado para texto.
   A 2:1 se conserva el 73% del ancho: encuadra al técnico sin que se lea como
   un recorte. Cada página elige qué parte conservar con «Enfoque de la foto». */
.hero-servicio__foto .suguru-img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: var(--foco, 50% 50%);
}

/* Las landings llevan fotos de 4:3 a 16:9; 16:9 las iguala sin castigar ninguna. */
.hero-landing__foto .suguru-img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: var(--foco, 50% 50%);
}

/* Mientras falte la foto real, el hueco conserva la altura del diseño. */
.hero-servicio__foto .placeholder { height: 380px; min-height: 0; aspect-ratio: auto; }

.banda-confianza {
	background: var(--petroleo);
	padding: 46px 0;
	text-align: center;
}
.banda-confianza__emoji { font-size: 26px; display: block; margin-bottom: 12px; }
.banda-confianza p {
	font-size: 16.5px;
	color: var(--sobre-oscuro);
	font-weight: 300;
	max-width: 760px;
	margin-inline: auto;
	line-height: 1.6;
}

.seccion-lista-servicios { padding: 78px 0; }
.seccion-lista-servicios .seccion-encabezado { max-width: 700px; margin-bottom: 40px; }

.grid-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.item-servicio {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 18px;
	padding: 22px 24px;
}
.item-servicio__check {
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--pal-caja);
	color: var(--pal-icono);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.item-servicio__check .icon { width: 18px; height: 18px; }
.item-servicio h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.item-servicio p  { font-size: 14.5px; color: var(--texto-suave); font-weight: 300; line-height: 1.55; }

.seccion-danos {
	background: var(--pal-fondo);
	padding: 64px 0;
	text-align: center;
}
.seccion-danos .titulo { margin-top: 12px; }
.seccion-danos .parrafo { margin-top: 14px; margin-bottom: 30px; }
.seccion-danos .boton { margin-top: 30px; }

/* ================================================================  BLOG  */
.hero-blog {
	background: linear-gradient(170deg, var(--suave-verde), #fff);
	padding: 60px 0 30px;
	text-align: center;
}
.hero-blog .titulo { margin-top: 12px; }
.hero-blog .parrafo { margin: 14px auto 0; max-width: 600px; }

.grid-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.seccion-grid-blog { padding: 40px 0 84px; }

.tarjeta-blog {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 22px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform .2s, box-shadow .2s;
}
.tarjeta-blog:hover {
	transform: translateY(-5px);
	box-shadow: var(--sombra-tarjeta-blog);
}
.tarjeta-blog__media { display: block; height: 170px; overflow: hidden; background: #eef3f1; text-decoration: none; }
.tarjeta-blog__media .suguru-img { height: 100%; object-fit: cover; }
.tarjeta-blog__media .placeholder { height: 100%; min-height: 0; aspect-ratio: auto; }
.tarjeta-blog--compacta .tarjeta-blog__media { height: 160px; }

.tarjeta-blog__cuerpo {
	padding: 22px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.tarjeta-blog h3 {
	font-size: 18.5px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}
.tarjeta-blog h3 a { color: inherit; text-decoration: none; }
.tarjeta-blog:hover h3 a { color: var(--azul); }
.tarjeta-blog p { font-size: 14px; color: var(--texto-suave); font-weight: 300; line-height: 1.55; }

.badge-categoria {
	align-self: flex-start;
	background: var(--suave-azul);
	color: var(--azul);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 20px;
	text-decoration: none;
}

.enlace-leer {
	color: var(--teal);
	font-weight: 600;
	font-size: 14px;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.enlace-leer .icon { width: 16px; height: 16px; }

/* Entrada individual */
.hero-single {
	background: linear-gradient(170deg, var(--suave-verde), #fff);
	padding: 54px 0 34px;
	text-align: center;
}
.hero-single .badge-categoria { align-self: center; }
.hero-single .titulo { margin: 16px 0 0; font-size: clamp(28px, 3vw + 14px, 40px); }
.hero-single__meta {
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--texto-tenue);
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.single__media {
	max-width: 900px;
	margin: 0 auto 40px;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: var(--sombra-imagen);
}

.entrada {
	max-width: 760px;
	margin-inline: auto;
	padding: 14px var(--gutter) 60px;
	font-size: 16.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--texto-cuerpo);
}
.entrada > * + * { margin-top: 22px; }
.entrada h2 {
	font-size: 28px;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-top: 44px;
}
.entrada h3 { font-size: 21px; font-weight: 600; margin-top: 34px; }
.entrada a { color: var(--teal); }
.entrada ul, .entrada ol { padding-left: 22px; }
.entrada li + li { margin-top: 8px; }
.entrada img { border-radius: 20px; }
.entrada blockquote {
	margin: 30px 0;
	padding: 22px 26px;
	background: var(--suave-verde);
	border-radius: 18px;
	border-left: 4px solid var(--verde);
	font-style: normal;
}
.entrada blockquote p { font-size: 16px; }
.entrada figure { margin: 30px 0; }
.entrada figcaption { font-size: 13px; color: var(--texto-tenue); text-align: center; margin-top: 10px; }

.relacionados { padding: 60px 0 40px; background: var(--suave-verde); }
.relacionados .titulo { text-align: center; margin-bottom: 34px; }

/* ==========================  PÁGINAS LOCALES Y LANDINGS DE CAMPAÑA  */
.hero-local {
	position: relative;
	overflow: hidden;
	background: var(--pal-hero);
	text-align: center;
}
.hero-local__forma {
	position: absolute;
	top: -150px; right: -100px;
	width: 470px; height: 470px;
	border-radius: 48% 52% 60% 40%;
	background: rgba(22, 60, 68, .04);
}
.hero-local__interior {
	position: relative;
	padding: 58px 0 62px;
	max-width: 900px;
}
.hero-local .titulo { margin-top: 16px; }
.hero-local .parrafo--hero { margin: 18px auto 0; max-width: 60ch; }
.hero-local .botones { justify-content: center; }

.seccion-servicios-locales { padding: 46px 0 10px; }

/* Etiquetas de servicio: la rejilla que usan las páginas locales y las landings. */
.grid-etiquetas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.etiqueta-servicio {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 14px;
	padding: 15px 18px;
	font-size: 14.5px;
	font-weight: 500;
	color: #2f4f49;
}
.etiqueta-servicio__check {
	flex: none;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--pal-caja);
	color: var(--pal-icono);
	display: flex;
	align-items: center;
	justify-content: center;
}

.seccion-refuerzo {
	background: var(--petroleo);
	padding: 58px 0;
	text-align: center;
}
.seccion-refuerzo .parrafo { margin: 16px auto 0; max-width: 68ch; }
.seccion-refuerzo .boton { margin-top: 26px; }

.entrada--local { padding-top: 54px; }
.entrada--local h2 { font-size: 24px; margin-top: 40px; }
.entrada--local h3 { font-size: 18.5px; margin-top: 28px; color: var(--azul); }

.seccion-razones { padding: 70px 0 20px; }

.grid-razones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.tarjeta-razon {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 20px;
	padding: 26px 22px;
}
.tarjeta-razon__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: var(--suave-verde-3);
	color: var(--azul);
	margin-bottom: 14px;
}
.tarjeta-razon h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.tarjeta-razon p { font-size: 14px; color: var(--texto-suave); font-weight: 300; line-height: 1.55; }

.seccion-opiniones { padding: 60px 0; background: var(--suave-verde); }

.valoracion {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 14px;
}
.valoracion__nota {
	font-family: var(--display);
	font-weight: 700;
	font-size: 26px;
	color: var(--texto);
}
.valoracion__estrellas { color: var(--verde); letter-spacing: 2px; font-size: 17px; }
.valoracion__total { font-size: 13.5px; color: var(--texto-suave); }

.grid-opiniones {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.tarjeta-opinion {
	background: #fff;
	border-radius: 20px;
	padding: 24px 22px;
	margin: 0;
	box-shadow: var(--sombra-suave);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tarjeta-opinion__estrellas { color: var(--verde); font-size: 15px; letter-spacing: 2px; line-height: 1; }
.tarjeta-opinion blockquote {
	margin: 0;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--texto-cuerpo);
	flex: 1;
}
.tarjeta-opinion figcaption { font-size: 13px; font-weight: 600; color: var(--texto); }

/* ---- Landing ---- */
.hero-landing {
	position: relative;
	overflow: hidden;
	background: var(--pal-hero);
}
.hero-landing__forma {
	position: absolute;
	top: -140px; right: -90px;
	width: 460px; height: 460px;
	border-radius: 48% 52% 60% 40%;
	background: rgba(22, 60, 68, .04);
}
.hero-landing__grid {
	position: relative;
	max-width: var(--ancho);
	margin-inline: auto;
	padding: 60px var(--gutter) 70px;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: center;
}
.hero-landing__titulo { margin-top: 18px; }
.hero-landing .parrafo--hero { margin-top: 18px; font-size: 17.5px; max-width: 46ch; }
.hero-landing__media { position: relative; }
.hero-landing__blob {
	position: absolute;
	inset: var(--pal-blob-inset, 6%);
	border-radius: var(--pal-blob-radio, 50%);
	background: var(--pal-blob);
}
.hero-landing__foto {
	position: relative;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: var(--sombra-imagen);
	background: #fff;
}

.sellos {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}
.sellos__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #2f4f49;
}
.sellos__item .icon { color: var(--check); }

/* ---- Beneficios del plan, agrupados ---- */
.grupo-beneficios + .grupo-beneficios { margin-top: 34px; }
.grupo-beneficios__titulo {
	font-family: var(--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 20px;
	color: var(--texto);
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--suave-verde);
}
.item-beneficio { align-items: flex-start; }
.item-beneficio__texto { display: block; }
.item-beneficio__nombre { display: block; font-weight: 600; }
.item-beneficio__desc {
	display: block;
	font-size: 13.5px;
	font-weight: 300;
	color: var(--texto-suave);
	margin-top: 2px;
	line-height: 1.5;
}

/* ====================================================  DOCUMENTOS LEGALES  */
.hero-blog--legal { text-align: left; padding-bottom: 40px; }
.hero-blog--legal .parrafo { margin-left: 0; margin-right: 0; max-width: 62ch; }
/* Misma medida que el cuerpo, para que título y texto compartan margen izquierdo. */
.hero-blog--legal .contenedor { max-width: 760px; }
.seccion-otros-legal .contenedor { max-width: 760px; }

.hero-blog__meta {
	margin-top: 18px;
	font-size: 13px;
	color: var(--texto-tenue);
}

/* Los documentos legales son largos: numeramos los títulos y damos algo más de
   aire que en una entrada de blog para que se puedan recorrer con la vista. */
.entrada--legal { counter-reset: seccion; }
.entrada--legal h2 {
	font-size: 24px;
	line-height: 1.25;
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid var(--borde);
}
.entrada--legal h3 {
	font-size: 18.5px;
	margin-top: 32px;
	color: var(--azul);
}
.entrada--legal > *:first-child { margin-top: 0; }
.entrada--legal h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.entrada--legal ul { padding-left: 20px; }
.entrada--legal li { margin-top: 8px; }
.entrada--legal strong { font-weight: 600; color: var(--texto); }

.seccion-otros-legal {
	background: var(--suave-verde);
	padding: 56px 0 64px;
}
.seccion-otros-legal .titulo { margin-bottom: 24px; }

.lista-legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.lista-legal__enlace {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 14px;
	padding: 16px 20px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--texto);
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, color .2s;
}
.lista-legal__enlace:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra-suave);
	color: var(--azul);
}
.lista-legal__enlace .icon { flex: none; color: var(--azul); }

/* ==============================================  PREGUNTAS FRECUENTES  */
.seccion-faq { padding: 46px 0 20px; }

.faq { display: flex; flex-direction: column; gap: 14px; }

.faq__item {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 18px;
	overflow: hidden;
	transition: box-shadow .2s, border-color .2s;
}
.faq__item[open] {
	border-color: #dfe9e4;
	box-shadow: var(--sombra-suave);
}

.faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 24px;
	cursor: pointer;
	font-family: var(--display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: var(--texto);
	list-style: none;
	transition: color .2s;
}
/* Fuera el triángulo por defecto de <details>; ponemos el nuestro. */
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ''; }

.faq__pregunta:hover { color: var(--azul); }
.faq__pregunta:focus-visible { outline-offset: -3px; }

.faq__icono {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--suave-verde-2);
	color: var(--azul);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s ease, background .2s;
}
.faq__item[open] .faq__icono {
	transform: rotate(180deg);
	background: var(--verde);
	color: var(--verde-texto);
}

.faq__respuesta {
	padding: 0 24px 22px;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--texto-suave);
}
.faq__respuesta > *:first-child { margin-top: 0; }
.faq__respuesta > *:last-child  { margin-bottom: 0; }
.faq__respuesta p { margin: 0 0 12px; }
.faq__respuesta a { color: var(--teal); }
.faq__respuesta ul,
.faq__respuesta ol { margin: 0 0 12px; padding-left: 20px; }
.faq__respuesta li + li { margin-top: 6px; }
.faq__respuesta strong { font-weight: 600; color: var(--texto); }

/* ==============================================================  PLANES  */
.hero-planes {
	position: relative;
	overflow: hidden;
	background: linear-gradient(170deg, #163c44, #1e4f52);
	color: #fff;
	padding: 64px var(--gutter) 70px;
	text-align: center;
}
.hero-planes__forma {
	position: absolute;
	top: -120px; right: -60px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: rgba(144, 230, 74, .09);
}
.hero-planes__contenido { position: relative; max-width: 1000px; margin-inline: auto; }
.hero-planes .titulo { margin-top: 14px; }
.hero-planes .parrafo { margin: 16px auto 0; color: var(--sobre-oscuro-2); font-size: 17px; max-width: 700px; }

.grid-planes {
	max-width: var(--ancho);
	margin: -40px auto 0;
	padding-inline: var(--gutter);
	display: grid;
	/* Se adapta al número de planes publicados: dos, tres o cuatro. */
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	position: relative;
	z-index: 2;
}

.tarjeta-plan {
	position: relative;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 26px;
	padding: 30px 26px;
	box-shadow: 0 20px 50px rgba(22, 60, 68, .10);
}
.tarjeta-plan--destacado {
	background: var(--azul);
	border-color: var(--azul);
	color: #fff;
	box-shadow: var(--sombra-plan);
}
.tarjeta-plan--destacado .tarjeta-plan__titulo,
.tarjeta-plan--destacado .tarjeta-plan__precio { color: #fff; }
.tarjeta-plan--destacado .tarjeta-plan__sub,
.tarjeta-plan--destacado .tarjeta-plan__periodo { color: #c8d6ef; }

.tarjeta-plan__badge {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 12px;
	background: var(--verde);
	color: var(--verde-texto);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
}
.tarjeta-plan__titulo {
	font-family: var(--display);
	font-weight: 600;
	font-size: 22px;
	margin: 0;
	color: var(--texto);
}
.tarjeta-plan__sub {
	font-size: 14px;
	color: var(--texto-suave);
	font-weight: 300;
	margin: 6px 0 18px;
}
.tarjeta-plan__precio {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(30px, 2.4vw + 12px, 40px);
	line-height: 1.1;
	color: var(--texto);
}
.tarjeta-plan__periodo {
	font-family: var(--cuerpo);
	font-size: 16px;
	font-weight: 400;
	color: var(--texto-tenue);
}
.tarjeta-plan__nota { font-size: 13px; color: var(--verde); font-weight: 600; margin-top: 6px; }
.tarjeta-plan .boton { margin-top: 22px; border-radius: 28px; padding: 14px; }

.planes-nota {
	text-align: center;
	font-size: 12.5px;
	color: var(--texto-tenue-2);
	max-width: var(--ancho-est);
	margin: 22px auto 0;
	padding-inline: var(--gutter);
}

.seccion-incluye { padding: 70px 0 30px; }
.seccion-incluye .seccion-encabezado { max-width: 620px; }

.grid-beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.item-beneficio {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 14px;
	padding: 14px 18px;
	font-size: 14.5px;
	color: #2f4f49;
}
.item-beneficio__check {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--suave-verde-3);
	color: var(--check);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.item-beneficio__check .icon { width: 14px; height: 14px; }

.seccion-cierre { padding: 30px 0 84px; }
.seccion-cierre__bloque {
	background: var(--suave-verde);
	border-radius: 24px;
	padding: 40px;
	text-align: center;
}
.seccion-cierre__bloque h2 { font-size: 26px; font-weight: 700; text-transform: uppercase; }
.seccion-cierre__bloque .parrafo { margin: 14px auto 0; max-width: 620px; }
.seccion-cierre__bloque .boton { margin-top: 26px; }

/* ==============================================  PÁGINAS GENÉRICAS / 404  */
.pagina-simple { padding: 54px 0 80px; }
.pagina-simple .hero-blog { margin-bottom: 40px; }

.paginacion {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 50px;
	flex-wrap: wrap;
}
.paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px; height: 42px;
	padding: 0 14px;
	border-radius: 30px;
	background: var(--suave-verde-2);
	color: var(--texto);
	text-decoration: none;
	font-weight: 500;
	font-size: 14.5px;
	transition: background .2s, color .2s;
}
.paginacion .page-numbers:hover { background: var(--suave-verde-bord); }
.paginacion .page-numbers.current { background: var(--verde); color: var(--verde-texto); }

.vacio {
	text-align: center;
	padding: 60px 0 90px;
}
.vacio .parrafo { margin: 14px auto 26px; max-width: 520px; }

/* ==========================================================  RESPONSIVE  */
@media (max-width: 759px) {
	:root { --gutter: 20px; }

	.nav__links   { display: none; }
	.nav__hamburguesa { display: flex; }

	.hero-home__grid,
	.hero-servicio__grid { grid-template-columns: 1fr; gap: 30px; }
	.hero-home__grid    { padding: 38px var(--gutter) 50px; }
	.hero-servicio__grid { padding: 42px var(--gutter) 52px; }

	.hero-home__tarjeta  { left: 8px; }
	.hero-home__pill     { right: 8px; }

	.grid-3,
	.grid-servicios,
	.grid-blog,
	.grid-beneficios,
	.grid-planes         { grid-template-columns: 1fr; }
	.grid-4              { grid-template-columns: repeat(2, 1fr); }

	.seccion-cobertura   { grid-template-columns: 1fr; gap: 32px; padding: 54px 0; }
	.seccion-servicios   { padding: 54px 0 20px; }
	.seccion-pasos       { padding: 54px 0; }
	.seccion-testimonios { padding: 54px 0; }
	.seccion-blog        { padding: 54px 0; }
	.seccion-lista-servicios { padding: 50px 0; }

	.banner-cta__interior { padding: 40px 26px; }
	.banner-cta           { margin-bottom: 54px; }

	.pie__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; padding-top: 46px; }

	.grid-planes { margin-top: -24px; }
	.seccion-cierre__bloque { padding: 32px 24px; }

	.grid-etiquetas,
	.grid-razones,
	.grid-opiniones      { grid-template-columns: 1fr; }
	.hero-landing__grid  { grid-template-columns: 1fr; gap: 30px; padding: 40px var(--gutter) 52px; }
	.hero-local__interior { padding: 40px 0 46px; }
	.seccion-razones     { padding: 50px 0 10px; }
	.seccion-opiniones   { padding: 46px 0; }
	.entrada--local      { padding-top: 40px; }

	.lista-legal { grid-template-columns: 1fr; }
	.entrada--legal h2 { font-size: 21px; margin-top: 36px; }

	.faq__pregunta { padding: 18px 18px; font-size: 16.5px; gap: 12px; }
	.faq__respuesta { padding: 0 18px 20px; font-size: 15px; }

	.stats { gap: 18px; }
	.stats__sep { display: none; }

	.seccion-blog__encabezado { flex-direction: column; align-items: flex-start; }
}

/* En pantallas muy estrechas los flotantes no deben tapar el contenido. */
@media (max-width: 380px) {
	.flotante, .redes-flotante__boton { width: 52px; height: 52px; }
	.redes-flotante { bottom: 84px; }
}