/* ==========================================================================
   ENTRE TUS OJOS — Óptica & Salud Visual
   Sistema de diseño v4 — "healthcare boutique"
   --------------------------------------------------------------------------
   Blanco dominante, azul marino para titulares, turquesa como acento y aqua
   pastel para los fondos suaves. Tarjetas de esquinas redondeadas, sombras
   mínimas, iconografía lineal dentro de círculos aqua y márgenes generosos.

   Capas:  1. Tokens · 2. Reset · 3. Tipografía · 4. Layout · 5. Componentes
           6. Secciones · 7. Flotantes · 8. Responsive · 9. Modo edición

   Los colores y las tipografías se inyectan desde la base de datos en el
   <head> de index.php; aquí solo actúan como valores de reserva. Todo lo
   derivado se calcula con color-mix() para que la paleta que elija el
   administrador se propague sola.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Paleta base (sobrescrita desde la base de datos) --- */
  --color-primary: #0E2C46;    /* azul marino — titulares */
  --color-secondary: #17A398;  /* turquesa — acento y decoración */
  --color-accent: #0C7A6D;     /* teal oscuro — botones y enlaces */
  --color-bg: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-text: #16283A;
  --color-text-muted: #4F6270;
  --color-border: #E4EFEC;
  --color-whatsapp: #0A8055;   /* verde con 4.96:1 frente a texto blanco */

  /* --- Escala aqua derivada del turquesa ---
     Al derivarla del token de marca, cambiar el turquesa desde el panel
     reajusta a la vez los círculos de iconos, los fondos y las manchas. */
  --aqua-50: color-mix(in srgb, var(--color-secondary) 4%, #FFFFFF);
  --aqua-100: color-mix(in srgb, var(--color-secondary) 8%, #FFFFFF);
  --aqua-200: color-mix(in srgb, var(--color-secondary) 16%, #FFFFFF);
  --aqua-300: color-mix(in srgb, var(--color-secondary) 30%, #FFFFFF);
  --accent-deep: color-mix(in srgb, var(--color-accent) 84%, #000000);
  --navy-soft: color-mix(in srgb, var(--color-primary) 8%, #FFFFFF);
  --on-dark: #FFFFFF;
  --on-dark-muted: color-mix(in srgb, #FFFFFF 72%, var(--color-primary));

  /* --- Tipografía --- */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida. Los escalones crecen a ritmos distintos para que en móvil
     el h1 siga leyéndose claramente por encima del h2. */
  --fs-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h4: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.875rem;
  --fs-xxs: 0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.65;
  --measure: 60ch;

  /* --- Espaciado (escala 8pt) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  /* Tres ritmos verticales: márgenes generosos sin que todo pese igual. */
  --section-y: clamp(3.75rem, 2rem + 5.5vw, 6rem);
  --section-y-tight: clamp(2rem, 1.4rem + 2vw, 3rem);
  --section-y-loose: clamp(4.5rem, 2.2rem + 6.5vw, 7rem);

  /* --- Layout --- */
  --container-max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 80px;
  --header-h-scrolled: 66px;

  /* --- Radios: generosos y suaves --- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* --- Elevaciones: mínimas, con tinte de marca --- */
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-primary) 6%, transparent);
  --shadow-sm: 0 2px 10px color-mix(in srgb, var(--color-primary) 6%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--color-primary) 8%, transparent);
  --shadow-lg: 0 20px 50px color-mix(in srgb, var(--color-primary) 12%, transparent);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s var(--ease);
  --t-base: 0.3s var(--ease);
  --t-slow: 0.55s var(--ease);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
  /* La cinta marquee mide más que la ventana: sin esto el móvil hereda
     scroll horizontal. */
  overflow-x: hidden;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 2000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--on-dark);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* El sprite no se pinta: solo aporta los <symbol> que consume <use>. */
.eto-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.eto-icon {
  display: block;
  flex: 0 0 auto;
}

/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-primary);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Antetítulo en versalitas turquesa. */
.section-subtitle,
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1.4;
}

/* La regla del sistema anterior ya no se usa: el antetítulo va limpio. */
.eyebrow-rule {
  display: none;
}

.section-subtitle--onDark {
  color: var(--aqua-300);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-top: var(--space-2);
}

/* Segunda mitad del titular en turquesa, como en el hero. Lo aplica main.js
   sobre los títulos de sección centrados. */
.section-title em {
  font-style: normal;
  color: var(--color-secondary);
}

.section-intro {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-top: var(--space-3);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-padding {
  padding-block: var(--section-y);
}

main {
  position: relative;
}

/* Cada sección crea su contexto de posicionamiento: la barra de controles
   del CMS se ancla con position:absolute y sin esto las nueve se apilarían
   en la esquina de <main>. */
main > section {
  position: relative;
}

/* Encabezado de sección centrado, como en la referencia. */
.section-header {
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}

.section-header .section-intro {
  margin-inline: auto;
}

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- Botones ------------------------------------------------------------ */

.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  min-height: 48px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  border: 1.5px solid transparent;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-lg {
  --btn-py: 1rem;
  --btn-px: 1.9rem;
  min-height: 54px;
  font-size: var(--fs-body);
}

.btn-sm {
  --btn-py: 0.6rem;
  --btn-px: 1.1rem;
  min-height: 44px;
  font-size: var(--fs-xs);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* Acción principal: teal sólido. */
.btn-primary {
  background: var(--color-accent);
  color: var(--on-dark);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 26%, transparent);
}

.btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent) 32%, transparent);
}

/* Acción secundaria: blanca con borde, como "Ver productos". */
.btn-secondary,
.btn-ghost {
  background: var(--color-card-bg);
  color: var(--color-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--on-dark);
}

.btn-accent:hover {
  background: var(--accent-deep);
}

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--on-dark);
}

.btn-whatsapp:hover {
  background: color-mix(in srgb, var(--color-whatsapp) 84%, #000000);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--color-accent);
  align-self: flex-start;
}

.link-arrow .eto-icon {
  transition: transform var(--t-base);
}

.link-arrow:hover .eto-icon {
  transform: translateX(4px);
}

/* --- Círculo aqua para iconografía lineal -------------------------------
   Es la pieza que más se repite en la referencia: icono de trazo dentro de
   un círculo aqua pastel.
   ------------------------------------------------------------------------ */

.icon-circle,
.trust-icon,
.service-icon-box,
.contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--aqua-200);
  color: var(--color-accent);
}

.trust-icon,
.contact-icon {
  width: 52px;
  height: 52px;
}

/* --- Animación de entrada ---------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   6. SECCIONES
   ========================================================================== */

/* --- 6.1 Cabecera ------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  /* `height` queda fuera de la transición a propósito: su valor sale de una
     custom property y, al cambiar esta (por scroll o al cruzar un punto de
     ruptura), la animación se queda colgada a medio camino y la cabecera
     conserva una altura intermedia. El alto cambia de golpe; lo que se
     suaviza es el borde y la sombra. */
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.site-header.scrolled {
  height: var(--header-h-scrolled);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
}

/* Icono de gafas en turquesa, sin caja: más limpio que un cuadro de color. */
.brand-mark {
  display: grid;
  place-items: center;
  color: var(--color-secondary);
  flex: 0 0 auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  white-space: nowrap;
}

.brand-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.brand-logo-img {
  max-height: 42px;
  width: auto;
}

.footer-brand-logo {
  display: block;
  max-height: 52px;
  width: auto;
  margin-bottom: var(--space-3);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.4vw, 1.25rem);
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Subrayado corto bajo el enlace activo, como en la referencia. */
.nav-link::after {
  content: '';
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--t-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-accent);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: var(--radius-sm);
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform var(--t-base), opacity var(--t-fast);
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú móvil a pantalla completa. */
.nav-mobile {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 890;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--gutter) var(--space-9);
  background: var(--color-bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base), transform var(--t-base),
              visibility var(--t-base);
}

.nav-mobile.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-mobile-links {
  display: flex;
  flex-direction: column;
}

.nav-mobile .nav-link {
  /* Toda la fila es zona táctil, no solo el ancho de la palabra. */
  width: 100%;
  min-height: 58px;
  padding-inline: 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.nav-mobile .nav-link::after {
  display: none;
}

.nav-mobile-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav-mobile-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* --- 6.2 Hero ----------------------------------------------------------- */

.hero-section {
  position: relative;
  padding-block: calc(var(--header-h) + var(--section-y)) var(--section-y);
  background: var(--color-bg);
  overflow: clip;
}

/* 45% texto / 55% imagen. */
.hero-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.hero-title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  max-width: 13ch;
}

/* La segunda mitad del titular en turquesa: es el gesto tipográfico que
   define la referencia. Lo envuelve main.js. */
.hero-title em {
  font-style: normal;
  color: var(--color-secondary);
}

/* Corazón lineal junto al titular. */
.hero-title-mark {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-left: 0.2em;
  color: var(--color-secondary);
}

.hero-subtitle {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: 40ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Tres beneficios con icono lineal bajo los botones. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
}

.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 11rem;
  font-size: var(--fs-xxs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-primary);
}

.hero-proof .eto-icon {
  color: var(--color-secondary);
}

.hero-media-wrapper {
  position: relative;
  display: grid;
  place-items: center;
}

/* Mancha orgánica aqua tras la fotografía. No cubre todo el fondo: asoma
   por arriba y por la derecha, como en la referencia. */
.hero-media-wrapper::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -6%;
  right: -12%;
  width: 88%;
  aspect-ratio: 1;
  background: var(--aqua-100);
  border-radius: 48% 52% 44% 56% / 52% 44% 56% 48%;
}

.hero-image-card {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-lg);
}

.hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dato de respaldo sobre la esquina de la foto. */
.hero-stat {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 16rem;
  padding: var(--space-4) var(--space-5);
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.hero-stat strong {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-secondary);
}

.hero-stat span {
  font-size: var(--fs-xxs);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Indicador de scroll (lo inserta main.js). */
.eto-scroll-indicator {
  display: none;
}

/* --- 6.3 Cinta marquee -------------------------------------------------- */

.marquee {
  padding-block: var(--space-2);
  /* Mismos márgenes laterales que .container, para que la banda arranque y
     termine exactamente donde lo hace el contenido del resto de la página. */
  padding-inline: var(--gutter);
}

/* La banda respeta los mismos márgenes laterales que el resto de la página:
   antes cruzaba la pantalla de lado a lado y rompía la retícula.
   `clip` contiene el desbordamiento del riel sin crear scroll horizontal. */
.marquee-inner {
  /* El ancho útil de .container es su max-width menos sus dos paddings. */
  max-width: calc(var(--container-max) - var(--gutter) * 2);
  margin-inline: auto;
  overflow: clip;
  padding-block: var(--space-4);
  background: var(--aqua-50);
  border-radius: var(--radius-lg);
  /* Difumina los extremos para que las palabras entren y salgan en lugar de
     cortarse en seco contra el borde. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-6);
}

.marquee-word {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.marquee-sep {
  color: var(--color-secondary);
  font-size: 0.625rem;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* --- 6.4 ¿Por qué elegirnos? (franja de confianza) ----------------------
   Cuatro beneficios en una fila, dentro de un panel de esquinas suaves.
   ------------------------------------------------------------------------ */

.trust-strip {
  padding-block: var(--section-y-tight);
  background: var(--color-bg);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  /* El panel lleva su propio relleno, que pisa el padding lateral heredado de
     .container. Sin acotar el ancho, el borde del panel sobresalía 40px por
     cada lado respecto al resto de secciones. */
  width: min(100% - var(--gutter) * 2, var(--container-max) - var(--gutter) * 2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-card-bg);
}

.trust-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.trust-info h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-bottom: 2px;
}

.trust-info p {
  font-size: var(--fs-xxs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* --- 6.5 Nosotros ------------------------------------------------------- */

.about-section {
  padding-block: var(--section-y-loose);
  background: var(--color-bg);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about-image-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 4.4;
}

.about-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
}

.about-content .section-title {
  margin-top: 0;
}

/* Cita destacada sobre panel aqua. Las comillas las pone el CSS para que el
   texto guardado desde el CMS no las lleve incrustadas. */
.about-quote {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--aqua-100);
  border-left: 3px solid var(--color-secondary);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-primary);
}

.about-quote span::before { content: '\201C'; }
.about-quote span::after { content: '\201D'; }

.about-text {
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.about-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.metric dt {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-secondary);
}

.metric dd {
  margin-top: var(--space-1);
  font-size: var(--fs-xxs);
  color: var(--color-text-muted);
}

/* --- 6.6 Servicios ------------------------------------------------------
   Tarjetas blancas centradas con el icono en círculo aqua. Sin fotografía:
   es lo que mantiene la sección ligera y ordenada.
   ------------------------------------------------------------------------ */

.services-section {
  background: var(--color-bg);
}

.services-grid {
  display: grid;
  /* El mínimo bajo permite dos columnas en móvil: apiladas de una en una,
     los siete servicios sumaban siete pantallas de scroll. 144px es lo que
     hace falta para que sigan siendo dos en una pantalla de 360px. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 144px), 1fr));
  gap: var(--space-4);
}

@media (min-width: 560px) {
  .services-grid {
    /* 200px es el mínimo que permite tres columnas en una tablet de 768px
       una vez descontados los márgenes laterales y la barra de scroll. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* La fotografía del servicio no se muestra en esta dirección visual, pero
   se conserva en el marcado para que siga siendo editable desde el CMS. */
.service-thumb {
  display: none;
}

.service-card-top {
  display: flex;
  justify-content: center;
}

.service-icon-box {
  width: 76px;
  height: 76px;
}

.service-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-title {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.service-desc {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  /* Acotar a 3 líneas iguala la altura de las tarjetas dentro de la fila. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Banda de conversión al final de la rejilla. */
.services-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding: var(--space-6) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--aqua-100);
}

.services-cta h3 {
  font-size: var(--fs-h3);
}

.services-cta p {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  max-width: 44ch;
}

/* --- 6.7 Colecciones ---------------------------------------------------- */

.collections-section {
  background: var(--aqua-50);
}

.collections-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.filter-btn {
  min-height: 46px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-card-bg);
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}

.filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--on-dark);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr));
  gap: var(--space-5) var(--space-4);
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--t-base), box-shadow var(--t-base),
              border-color var(--t-base);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.product-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--aqua-50);
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.product-card:hover .product-thumb img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--on-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.product-category-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.product-name {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.product-description {
  font-size: var(--fs-xxs);
  line-height: 1.55;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.product-price {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.product-price--empty {
  font-family: var(--font-body);
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* --- 6.8 Banner de promoción -------------------------------------------
   Tres zonas: fotografía · oferta · ventajas. Fondo en degradado aqua muy
   suave, esquinas muy redondeadas.
   ------------------------------------------------------------------------ */

.cta-banner-wrap {
  padding-block: var(--section-y-tight);
}

.cta-banner-section {
  display: grid;
  grid-template-columns: 0.85fr 1.05fr 0.9fr;
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: linear-gradient(115deg, var(--aqua-100), var(--aqua-50) 62%, var(--color-bg));
}

/* La fotografía va en su propio contenedor para que el CMS pueda anclar
   ahí el disparador de "cambiar imagen". */
.cta-banner-photo {
  align-self: stretch;
  min-height: 100%;
  overflow: hidden;
}

.cta-banner-bg {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
}

.cta-banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(2rem, 4vw, 3.25rem);
}

.cta-banner-content .section-subtitle {
  color: var(--color-accent);
  letter-spacing: 0.16em;
}

/* Cifra de la promoción: el elemento de mayor peso de todo el bloque. */
.cta-promo-figure {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 0.9;
  color: var(--color-primary);
}

.cta-promo-value {
  font-size: clamp(3.5rem, 2rem + 6vw, 5.5rem);
  letter-spacing: -0.04em;
}

.cta-promo-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.cta-promo-pct {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.cta-promo-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cta-banner-title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 700;
  color: var(--color-secondary);
}

.cta-banner-p {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* Tres ventajas a la derecha, separadas por una línea vertical. */
.cta-banner-perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--color-border);
  align-self: stretch;
  justify-content: center;
}

.cta-perk {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.cta-perk .eto-icon {
  color: var(--color-accent);
  margin-top: 2px;
}

.cta-perk h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-bottom: 2px;
}

.cta-perk p {
  font-size: var(--fs-xxs);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* --- 6.9 Galería -------------------------------------------------------- */

.gallery-section {
  background: var(--color-bg);
}

/* Masonry con multicolumna: se adapta a cualquier número de imágenes sin
   dejar huecos. */
.gallery-grid {
  columns: 3;
  column-gap: var(--space-4);
}

.gallery-item {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: zoom-in;
  background: var(--aqua-50);
}

.gallery-item:nth-child(3n + 1) { aspect-ratio: 4 / 3; }
.gallery-item:nth-child(3n + 2) { aspect-ratio: 3 / 2; }
.gallery-item:nth-child(3n)     { aspect-ratio: 1 / 1; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-primary) 90%, transparent),
    transparent
  );
  color: var(--on-dark);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay {
  opacity: 1;
  transform: none;
}

.gallery-tag {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aqua-300);
}

.gallery-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--on-dark);
  margin-top: 2px;
}

/* --- 6.10 Testimonios --------------------------------------------------- */

.testimonials-section {
  background: var(--aqua-50);
}

.testimonials-carousel {
  position: relative;
}

.testimonials-grid {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
}

.testimonials-grid::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  position: relative;
  flex: 0 0 clamp(17rem, 31%, 23rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  color: var(--color-secondary);
}

.testimonial-quote {
  flex: 1;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--color-text);
}

.testimonial-quote span::before { content: '\201C'; }
.testimonial-quote span::after { content: '\201D'; }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.testimonial-name {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--color-primary);
}

.testimonial-role {
  font-size: var(--fs-xxs);
  color: var(--color-text-muted);
}

.demo-tag {
  margin-left: auto;
  align-self: flex-start;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.carousel-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.carousel-nav[hidden] {
  display: none;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-accent);
  background: var(--color-card-bg);
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast);
}

.carousel-btn:hover:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--on-dark);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- 6.11 Contacto ------------------------------------------------------ */

.contact-section {
  background: var(--color-bg);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--t-fast);
}

.contact-info-item:hover {
  background: var(--aqua-50);
}

.contact-details h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.contact-details p {
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-primary);
}

.contact-link:hover {
  color: var(--color-accent);
}

.contact-socials {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0 0 var(--space-4);
}

.social-link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--aqua-200);
  color: var(--color-accent);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.social-link:hover {
  background: var(--color-accent);
  color: var(--on-dark);
}

.map-container {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  aspect-ratio: 4 / 3;
  background: var(--aqua-50);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 6.12 Pie de página -------------------------------------------------
   Amplio, limpio y en aqua muy claro: nada de bloque oscuro al final.
   ------------------------------------------------------------------------ */

.site-footer {
  position: relative;
  padding-block: var(--section-y) var(--space-6);
  background: var(--aqua-50);
  color: var(--color-text-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}

.footer-brand h3 {
  font-size: 1.25rem;
  color: var(--color-primary);
}

.footer-brand p {
  margin-block: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  max-width: 32ch;
}

.footer-links h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* La navegación en dos columnas mantiene los 44px de zona táctil sin
   estirar el pie a lo alto. */
.footer-nav:not(.footer-nav--contact) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}

.footer-nav li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.footer-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  /* Ocupa su celda entera: así la zona pulsable no se limita al ancho de la
     palabra («Inicio» medía 38px). */
  flex: 1 1 auto;
  min-width: 0;
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-nav--contact .eto-icon {
  color: var(--color-secondary);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xxs);
}

/* Acceso discreto al panel: visible solo al pasar por encima. */
.admin-gear-trigger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-accent);
  background: var(--aqua-100);
  border: 1px solid var(--color-border);
  opacity: 1;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.admin-gear-trigger:hover {
  background: var(--aqua-200);
  border-color: var(--color-accent);
  transform: scale(1.06);
}

/* ==========================================================================
   7. ELEMENTOS FLOTANTES
   ========================================================================== */

.eto-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 950;
  height: 3px;
  width: 0;
  background: var(--color-secondary);
  transition: width 0.1s linear;
}

.whatsapp-float-btn {
  position: fixed;
  z-index: 880;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: var(--on-dark);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base);
}

.whatsapp-float-btn:hover {
  transform: scale(1.06);
}

.whatsapp-float-btn.bottom-right { right: var(--space-5); bottom: var(--space-5); }
.whatsapp-float-btn.bottom-left { left: var(--space-5); bottom: var(--space-5); }

.whatsapp-pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-whatsapp);
  opacity: 0.5;
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: -1;
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* --- Lightbox de galería ------------------------------------------------ */

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--color-primary) 94%, transparent);
  backdrop-filter: blur(6px);
}

.lightbox-modal.active {
  display: grid;
}

.lightbox-content {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.lightbox-caption {
  text-align: center;
  color: var(--on-dark);
  font-size: var(--fs-sm);
}

.lightbox-close {
  position: absolute;
  top: calc(-1 * var(--space-7));
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, #FFFFFF 16%, transparent);
  color: var(--on-dark);
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox-close:hover {
  background: color-mix(in srgb, #FFFFFF 28%, transparent);
}

/* --- Modal de acceso al panel ------------------------------------------
   admin.css solo se carga cuando ya hay sesión, así que estos estilos tienen
   que vivir aquí: sin ellos, un visitante que pulsa el engranaje vería el
   formulario de acceso completamente sin estilar.
   ------------------------------------------------------------------------ */

.eto-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--color-primary) 72%, transparent);
  backdrop-filter: blur(4px);
}

.eto-modal-overlay.active {
  display: grid;
}

.eto-modal {
  width: min(28rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.eto-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.eto-modal-header h3 {
  font-size: var(--fs-h3);
}

.eto-modal-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
}

.eto-modal-close:hover {
  background: var(--aqua-100);
}

.eto-modal-body {
  padding: var(--space-5);
}

.eto-form-group {
  margin-bottom: var(--space-4);
}

.eto-form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-xxs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.eto-form-group input,
.eto-form-group textarea,
.eto-form-group select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.eto-form-group input:focus {
  border-color: var(--color-accent);
}

/* Herramientas de administración incrustadas en las tarjetas públicas. */
.eto-item-tools {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  display: flex;
  gap: var(--space-1);
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

/* --- <1024px ------------------------------------------------------------ */
@media (max-width: 1023px) {
  :root {
    --header-h: 72px;
    --header-h-scrolled: 64px;
  }

  .nav-desktop {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-grid,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: var(--space-8);
  }

  .hero-title {
    max-width: 16ch;
  }

  .hero-image-card {
    aspect-ratio: 16 / 11;
  }

  .about-image-card {
    aspect-ratio: 16 / 10;
    max-height: 24rem;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
  }

  /* El banner pasa a dos zonas: la foto encabeza y las ventajas bajan. */
  .cta-banner-section {
    grid-template-columns: 1fr 1fr;
  }

  .cta-banner-photo {
    grid-column: 1 / -1;
    max-height: 15rem;
  }

  .cta-banner-perks {
    border-left: none;
    padding-top: 0;
  }

  .gallery-grid {
    columns: 2;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* --- <768px ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --radius-2xl: 26px;
    --radius-xl: 20px;
  }

  .section-header {
    margin-bottom: var(--space-6);
  }

  .hero-section {
    padding-block: calc(var(--header-h) + var(--space-7)) var(--space-9);
  }

  .hero-media-wrapper::before {
    top: -4%;
    right: -8%;
    width: 78%;
  }

  .hero-ctas {
    width: 100%;
  }

  .hero-ctas .btn {
    flex: 1 1 100%;
  }

  .hero-image-card {
    aspect-ratio: 4 / 3;
  }

  .hero-stat {
    position: static;
    margin-top: var(--space-4);
    max-width: none;
  }

  .cta-banner-section {
    grid-template-columns: 1fr;
  }

  .cta-banner-perks {
    padding-inline: clamp(1.5rem, 6vw, 2.5rem);
    padding-bottom: var(--space-7);
  }

  .services-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .services-cta .btn {
    width: 100%;
  }

  .map-container {
    aspect-ratio: 1 / 1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* --- <560px ------------------------------------------------------------- */
@media (max-width: 559px) {
  .trust-grid {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-4);
  }

  .gallery-grid {
    columns: 2;
    column-gap: var(--space-3);
  }

  .testimonial-card {
    flex-basis: min(20rem, 84vw);
  }

  /* A 152px de ancho la descripción se parte en tiras ilegibles. */
  .product-description {
    display: none;
  }

  .product-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .product-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-top: var(--space-3);
  }

  .product-footer .btn {
    width: 100%;
  }

  .product-price {
    font-size: 1.125rem;
  }

  .product-card:hover,
  .service-card:hover {
    transform: none;
  }

  .lightbox-close {
    top: 0;
    right: 0;
  }
}

@media (min-width: 560px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-5);
  }
}

@media (min-width: 1100px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ==========================================================================
   9. MODO EDICIÓN
   Los recortes a n líneas son una decisión de maquetación; mientras el
   administrador edita necesita ver el texto íntegro. La fotografía de cada
   servicio también reaparece para poder cambiarla desde la propia página.
   ========================================================================== */

body.eto-edit-mode .service-desc,
body.eto-edit-mode .product-description {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

body.eto-edit-mode .service-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
}

body.eto-edit-mode .service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* admin.css desplaza el body y la cabecera 52px para dejar sitio a su barra
   fija; el menú móvil necesita el mismo desplazamiento. */
body.eto-admin-active .nav-mobile {
  top: calc(var(--header-h) + 52px);
}

/* --- <560px: cabecera y bloques compactos -------------------------------
   A 375px la marca, el botón de WhatsApp y el menú no caben en una línea.
   El botón se reduce a su icono: sigue siendo la vía de contacto principal
   y ya no empuja al resto fuera de la pantalla.
   ------------------------------------------------------------------------ */
@media (max-width: 559px) {
  .header-cta-desktop {
    --btn-px: 0;
    width: 48px;
    padding-inline: 0;
    gap: 0;
  }

  .header-cta-desktop span,
  .header-cta-desktop {
    font-size: 0;
  }

  .header-cta-desktop .eto-icon {
    width: 22px;
    height: 22px;
  }

  .brand-name {
    font-size: 1.125rem;
  }

  .brand-mark .eto-icon {
    width: 28px;
    height: 28px;
  }

  .cta-banner-bg {
    min-height: 11rem;
    max-height: 13rem;
  }

  .service-card {
    padding: var(--space-5) var(--space-3);
    gap: var(--space-3);
  }

  .service-icon-box {
    width: 60px;
    height: 60px;
  }

  .service-icon-box .eto-icon {
    width: 26px;
    height: 26px;
  }

  .hero-proof {
    gap: var(--space-3) var(--space-4);
  }

  .hero-proof li {
    max-width: 9rem;
  }
}