/* =========================================================================
   FIKIO — hoja de estilos única
   Sistema de diseño: variables, tipografía, layout, componentes, utilidades.
   Mobile-first: los estilos base son de móvil, se amplían con min-width.
   ========================================================================= */

/* -------------------------------------------------------------------------
   POLÍTICA DE CONTRASTE (verificada con la fórmula WCAG — ver AGENTS.md)

   - --fikio-oro NUNCA es color de texto. Solo fondo (con texto --fikio-carbon
     encima, 7.4:1) o detalle gráfico (líneas, iconos, subrayados).
   - --fikio-oro-oscuro como texto: permitido sobre --fikio-blanco (5.2:1).
     Sobre --fikio-crema solo en texto grande/negrita (4.46:1, falla el
     umbral de 4.5:1 para texto normal por muy poco).
   - --fikio-topo NO se usa como color de texto en ningún tamaño (2.8:1 sobre
     crema, 3.3:1 sobre blanco — no cumple ni el mínimo de texto grande).
     Se reserva para bordes, iconos y detalles decorativos.
   - --fikio-gris es el texto secundario por defecto: cumple sobre blanco
     (5.3:1) y sobre crema (4.55:1).
   ------------------------------------------------------------------------- */

:root {
  /* Paleta de marca */
  --fikio-oro:        #D8AF30;
  --fikio-oro-oscuro: #826A1D;
  --fikio-oro-claro:  #D7C078;
  --fikio-carbon:     #242526;
  --fikio-tinta:      #171E25;
  --fikio-crema:      #F2ECE9;
  --fikio-arena:      #BFACA4;
  --fikio-topo:       #9A8B87;
  --fikio-gris:       #6F6A6A;
  --fikio-blanco:     #FFFFFF;

  /* Roles semánticos */
  --color-fondo:            var(--fikio-blanco);
  --color-fondo-alterno:    var(--fikio-crema);
  --color-texto:            var(--fikio-tinta);
  --color-texto-secundario: var(--fikio-gris);
  --color-borde:            var(--fikio-arena);
  --color-acento:           var(--fikio-oro);
  --color-acento-texto:     var(--fikio-oro-oscuro);
  --color-foco:             var(--fikio-oro-oscuro);
  --color-whatsapp:         #25D366;
  --color-whatsapp-oscuro:  #1DA851;
  --color-error:            #B3261E;

  /* Tokens del rediseño "Propuesta B" (cabecera, pie y home) — los demás
     colores de esta paleta ya cubren el resto de valores del handoff
     (--fikio-tinta = carbón #171E25, --fikio-gris = texto apagado #6F6A6A,
     --fikio-topo = texto muy apagado #9A8B87, --color-error = rojo cerrado). */
  --pb-fondo-pagina:   #FBF9F8;
  --pb-borde-suave:    #EDE4DF;
  --pb-borde-cabecera: #E8DFDA;
  --pb-borde-fantasma: #C9BCB5;
  --pb-nav-inactivo:   #4B4B4B;
  --pb-verde-abierto:  #2E7D32;

  /* Tipografía */
  --fuente-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-sm:   clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
  --fs-xl:   clamp(1.75rem, 1.52rem + 1.1vw, 2.375rem);
  --fs-2xl:  clamp(2.125rem, 1.75rem + 1.8vw, 3rem);
  --fs-hero: clamp(2.75rem, 1.9rem + 4.5vw, 5.75rem);

  --lh-ajustada: 1.15;
  --lh-titulo:   1.25;
  --lh-cuerpo:   1.6;

  /* Espaciado — escala de 8px */
  --sp-1: 0.5rem;   /* 8px */
  --sp-2: 1rem;     /* 16px */
  --sp-3: 1.5rem;   /* 24px */
  --sp-4: 2rem;     /* 32px */
  --sp-5: 3rem;     /* 48px */
  --sp-6: 4rem;     /* 64px */
  --sp-7: 6rem;     /* 96px */
  --sp-8: 8rem;     /* 128px */

  /* Layout */
  --ancho-maximo: 1180px;
  --ancho-lectura: 68ch;
  /* Esquinas cuadradas a propósito — es una decisión de estilo (editorial /
     boutique, no "SaaS redondeado"), no un olvido. No reintroducir radio. */
  --radio: 0;
  --radio-sm: 0;

  /* Movimiento */
  --duracion: 200ms;
  --easing: ease;

  /* Altura del header, se recalcula por JS al hacer scroll */
  --alto-header: 76px;
}

/* -------------------------------------------------------------------------
   RESET Y BASE
   ------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-header) + var(--sp-2));
}

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

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-base);
  line-height: var(--lh-cuerpo);
  color: var(--color-texto);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  body.tiene-barra-movil { padding-bottom: 64px; }
}

img, picture { max-width: 100%; display: block; height: auto; }

/* Todos los SVG del sitio son iconos propios (24x24 o 32x32 de viewBox) sin
   width/height en el propio <svg>: sin esta regla, el navegador los renderiza
   a su tamaño por defecto (~300px). Los contextos que necesitan otro tamaño
   (botón de menú, WhatsApp flotante, barra móvil...) lo sobreescriben abajo. */
svg { width: 1.2em; height: 1.2em; max-width: 100%; flex-shrink: 0; }

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-2);
  color: var(--fikio-tinta);
}

h1 { font-size: var(--fs-2xl); line-height: var(--lh-ajustada); font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-xl); font-weight: 600; }
h3 { font-size: var(--fs-lg); font-weight: 500; }
h4 { font-size: var(--fs-md); font-weight: 600; font-family: var(--fuente-cuerpo); letter-spacing: normal; }

/* -------------------------------------------------------------------------
   FIRMA VISUAL — kicker, regla y numeral
   Se repiten en todo el sitio como hilo conductor de marca (más allá de los
   botones). Un kicker es la etiqueta pequeña en mayúsculas con una línea de
   oro delante; el numeral es una cifra grande en Playfair itálica para las
   listas editoriales de servicios/motivos.
   ------------------------------------------------------------------------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fikio-oro-oscuro);
  margin-bottom: var(--sp-2);
}
.kicker::before {
  content: '';
  display: block;
  width: 2.5em;
  height: 1px;
  background: var(--fikio-oro);
  flex-shrink: 0;
}
.kicker--claro { color: var(--fikio-oro-claro); }
/* En fondo crema, el texto del kicker en oro-oscuro cae a 4.46:1 (por debajo
   de 4.5:1) al ser texto pequeño — no cuenta como "texto grande". La línea
   de oro delante ya aporta el acento de color; el texto pasa a tinta. */
.seccion--alterna .kicker { color: var(--fikio-tinta); }

.regla-oro {
  width: 64px;
  height: 2px;
  background: var(--fikio-oro);
  margin-block: var(--sp-2) var(--sp-3);
  border: none;
}

.numeral {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 500;
  color: var(--fikio-oro-claro);
  line-height: 1;
}

p { margin: 0 0 var(--sp-2); max-width: var(--ancho-lectura); }
p:last-child { margin-bottom: 0; }

.texto-ancho-completo { max-width: none; }

ul, ol { padding-left: 1.25em; margin: 0 0 var(--sp-2); }
li { margin-bottom: var(--sp-1); }

a { color: var(--color-acento-texto); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--fikio-tinta); }

table { border-collapse: collapse; width: 100%; }

button { font-family: inherit; }

/* Foco de teclado siempre visible */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Enlace de salto al contenido */
.saltar-contenido {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  background: var(--fikio-tinta);
  color: var(--fikio-blanco);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radio-sm);
  z-index: 1000;
  transition: top var(--duracion) var(--easing);
}
.saltar-contenido:focus {
  top: var(--sp-2);
  color: var(--fikio-blanco);
}

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

/* -------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--sp-2);
}
@media (min-width: 640px) { .contenedor { padding-inline: var(--sp-3); } }
@media (min-width: 1024px) { .contenedor { padding-inline: var(--sp-4); } }

.seccion { padding-block: var(--sp-6); }
.seccion--alterna { background: var(--color-fondo-alterno); }
.seccion--carbon { background: var(--fikio-carbon); color: var(--fikio-blanco); }
.seccion--carbon h2, .seccion--carbon h3 { color: var(--fikio-blanco); }

.cabecera-seccion { max-width: 640px; margin-bottom: var(--sp-4); }
.cabecera-seccion--centrada { margin-inline: auto; text-align: center; }
.cabecera-seccion p { margin-inline: auto; }

main { display: block; }

/* -------------------------------------------------------------------------
   REVELADO EN SCROLL (IntersectionObserver añade .en-vista)
   ------------------------------------------------------------------------- */

/* Por defecto visible: si el JS no llega a ejecutarse, se ve todo el contenido. */
.revelar { opacity: 1; transform: none; }

/* Solo con JS activo (clase .js añadida en <head>) se oculta para animar la entrada. */
.js .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duracion) var(--easing), transform var(--duracion) var(--easing);
}
.js .revelar.en-vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   BOTONES
   ------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0.85em 1.5em;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--duracion) var(--easing), border-color var(--duracion) var(--easing), color var(--duracion) var(--easing);
}

.boton--reserva {
  background: var(--fikio-oro);
  color: var(--fikio-carbon);
}
.boton--reserva:hover { background: var(--fikio-oro-claro); color: var(--fikio-carbon); }

.boton--whatsapp {
  background: var(--color-whatsapp);
  color: var(--fikio-blanco);
}
.boton--whatsapp:hover { background: var(--color-whatsapp-oscuro); color: var(--fikio-blanco); }

.boton--contorno {
  background: transparent;
  border-color: var(--fikio-tinta);
  color: var(--fikio-tinta);
}
.boton--contorno:hover { background: var(--fikio-tinta); color: var(--fikio-blanco); }

.boton--contorno-claro {
  background: transparent;
  border-color: var(--fikio-blanco);
  color: var(--fikio-blanco);
}
.boton--contorno-claro:hover { background: var(--fikio-blanco); color: var(--fikio-tinta); }

.boton--bloque { width: 100%; }
.boton svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* -------------------------------------------------------------------------
   HEADER — rediseño "Propuesta B" (componente compartido en todo el sitio)
   ------------------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 249, 248, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pb-borde-cabecera);
  transition: box-shadow var(--duracion) var(--easing);
}
.cabecera.con-sombra { box-shadow: 0 2px 12px rgba(23, 30, 37, 0.08); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  height: var(--alto-header, 84px);
  transition: height var(--duracion) var(--easing);
}
.cabecera { --alto-header: 84px; }
.cabecera.compacta { --alto-header: 64px; }

.cabecera__logo {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.cabecera__logo img { height: 68px; width: auto; transition: height var(--duracion) var(--easing); }
.cabecera.compacta .cabecera__logo img { height: 52px; }
@media (max-width: 600px) { .cabecera__logo img { height: 56px; } .cabecera.compacta .cabecera__logo img { height: 46px; } }

.cabecera__nav-escritorio {
  display: none;
}
.cabecera__nav-escritorio ul {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cabecera__nav-escritorio a {
  color: var(--pb-nav-inactivo);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.cabecera__nav-escritorio a:hover { color: var(--fikio-oro-oscuro); }
.cabecera__nav-escritorio a[aria-current="page"] {
  color: var(--fikio-tinta);
  font-weight: 600;
}

.cabecera__acciones { display: flex; align-items: center; gap: var(--sp-2); }

.cabecera__telefono {
  display: none;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 15px;
  color: var(--fikio-tinta);
  text-decoration: none;
}
.cabecera__telefono:hover { color: var(--fikio-oro-oscuro); }

.boton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fikio-tinta);
}
.boton-menu svg { width: 26px; height: 26px; }

@media (min-width: 1024px) {
  .cabecera__nav-escritorio { display: block; }
  .cabecera__telefono { display: inline-flex; }
  .boton-menu { display: none; }
}

/* Menú móvil a pantalla completa */
.menu-movil {
  position: fixed;
  inset: 0;
  background: var(--fikio-blanco);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  transform: translateX(100%);
  transition: transform var(--duracion) var(--easing);
}
.menu-movil.abierto { transform: translateX(0); }
.menu-movil__cabecera { display: flex; justify-content: flex-end; }
.menu-movil nav { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.menu-movil ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.menu-movil a {
  font-family: var(--fuente-display);
  font-size: var(--fs-lg);
  color: var(--fikio-tinta);
  text-decoration: none;
}
.menu-movil__pie { display: flex; flex-direction: column; gap: var(--sp-2); padding-block: var(--sp-3); }

@media (min-width: 1024px) {
  .menu-movil { display: none; }
}

/* -------------------------------------------------------------------------
   BOTONES PASTILLA — cabecera, menú móvil, pie y home (rediseño "Propuesta
   B"). Independientes de .boton para no alterar el estilo de esquinas
   cuadradas que conserva el resto del contenido del sitio (ver AGENTS.md).
   ------------------------------------------------------------------------- */

.boton-pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.boton-pastilla svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.boton-pastilla--grande { padding: 20px 32px; font-size: 16px; }
.boton-pastilla--bloque { width: 100%; }

.boton-pastilla--oro { background: var(--fikio-oro); color: var(--fikio-tinta); }
.boton-pastilla--oro:hover { background: var(--fikio-tinta); color: var(--fikio-blanco); }

.boton-pastilla--oscuro { background: var(--fikio-tinta); color: var(--fikio-blanco); }
.boton-pastilla--oscuro:hover { background: var(--fikio-oro-oscuro); color: var(--fikio-blanco); }

.boton-pastilla--fantasma { background: transparent; border-color: var(--pb-borde-fantasma); color: var(--fikio-tinta); }
.boton-pastilla--fantasma:hover { border-color: var(--fikio-tinta); background: var(--fikio-blanco); }

.boton-pastilla--claro { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--fikio-blanco); }
.boton-pastilla--claro:hover { background: var(--fikio-blanco); color: var(--fikio-tinta); }

.boton-pastilla--whatsapp { background: var(--color-whatsapp); color: var(--fikio-blanco); }
.boton-pastilla--whatsapp:hover { background: var(--color-whatsapp-oscuro); color: var(--fikio-blanco); }

/* -------------------------------------------------------------------------
   MIGAS DE PAN
   ------------------------------------------------------------------------- */

/* Las migas de pan hacen también de "kicker" editorial: línea de oro +
   mayúsculas pequeñas, el mismo lenguaje que .kicker en el resto del sitio. */
.migas {
  padding-block: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-texto-secundario);
}
.migas::before {
  content: '';
  display: block;
  width: 2.5em;
  height: 1px;
  background: var(--fikio-oro);
  flex-shrink: 0;
}
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.migas li { margin: 0; display: flex; gap: 0.5em; }
.migas li:not(:last-child)::after { content: '/'; color: var(--fikio-arena); margin-left: 0.5em; font-weight: 400; }
.migas a { color: var(--color-texto-secundario); text-decoration: none; }
.migas a:hover { color: var(--color-acento-texto); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--fikio-oro-oscuro); }

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate; /* contiene el z-index negativo de .hero__imagen dentro
    del hero — sin esto, escapa al contexto de apilamiento raíz y pinta
    detrás de las secciones siguientes de toda la página al hacer scroll */
  overflow: hidden;
  color: var(--fikio-blanco);
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
}
.hero__imagen {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__imagen img { width: 100%; height: 100%; object-fit: cover; }
.hero__imagen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23,30,37,0.85) 0%, rgba(23,30,37,0.35) 55%, rgba(23,30,37,0.15) 100%);
  z-index: -1;
}
.hero__contenido { padding-block: var(--sp-6) var(--sp-5); max-width: 640px; }
.hero__kicker { color: var(--fikio-oro-claro); margin-bottom: var(--sp-3); }
.hero__kicker::before { background: var(--fikio-oro-claro); }
.hero__titulo { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.025em; color: var(--fikio-blanco); margin-bottom: var(--sp-3); }
.hero__titulo em { font-style: italic; font-weight: 500; color: var(--fikio-oro-claro); }
.hero__apoyo { font-size: var(--fs-md); color: var(--fikio-blanco); max-width: 42ch; margin-bottom: var(--sp-3); }
.hero .grupo-botones { margin-top: var(--sp-2); }

/* Split editorial en escritorio: la foto deja de ser fondo a sangre con
   texto encima y pasa a ocupar su propia columna, enmarcada con sombra dura
   en oro (motivo repetido del sitio) — sin degradado porque el texto ya no
   va sobre la imagen. */
@media (min-width: 1024px) {
  .hero {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: var(--sp-6);
    overflow: visible;
    color: var(--fikio-tinta);
    background: var(--fikio-crema);
    /* Ancho máximo propio: sin esto, en monitores anchos la columna de la
       imagen crece sin límite y, como su altura depende del ancho
       (aspect-ratio), la foto se dispara de tamaño y descoloca el texto. */
    max-width: 1400px;
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-4);
  }
  /* .hero__contenido vive dentro de <div class="contenedor">, que es el
     verdadero hijo directo del grid — el ancho/padding lo controla ya el
     .hero de arriba, así que aquí se anulan los suyos para no duplicarlos. */
  .hero > .contenedor { order: 1; max-width: none; padding-inline: 0; }
  .hero__imagen {
    position: relative;
    inset: auto;
    order: 2;
    aspect-ratio: 4 / 5;
    max-height: 640px;
    justify-self: center;
    box-shadow: 18px 18px 0 0 var(--fikio-oro);
    margin: 0 var(--sp-4) 0 0;
  }
  .hero__imagen::after { display: none; }
  .hero__contenido { padding-block: 0; max-width: 480px; }
  .hero__kicker { color: var(--fikio-oro-oscuro); }
  .hero__kicker::before { background: var(--fikio-oro); }
  .hero__titulo { color: var(--fikio-tinta); }
  .hero__titulo em { color: var(--fikio-oro-oscuro); }
  .hero__apoyo { color: var(--color-texto-secundario); }
  /* .boton--contorno-claro está pensado para fondo oscuro (borde/texto
     blanco); el hero en escritorio pasa a fondo crema, así que aquí se
     invierte a oscuro para no perder el contraste. */
  .hero .boton--contorno-claro { border-color: var(--fikio-tinta); color: var(--fikio-tinta); }
  .hero .boton--contorno-claro:hover { background: var(--fikio-tinta); color: var(--fikio-blanco); }
}

/* Cabecera de páginas internas (sin foto a sangre) */
.cabecera-pagina {
  background: var(--fikio-crema);
  border-bottom: 1px solid var(--fikio-arena);
  padding-block: var(--sp-6) var(--sp-5);
}
.cabecera-pagina h1 { margin-bottom: var(--sp-1); }
.cabecera-pagina__apoyo { color: var(--color-texto-secundario); font-size: var(--fs-md); max-width: var(--ancho-lectura); }

/* -------------------------------------------------------------------------
   FRANJA DE CONFIANZA
   ------------------------------------------------------------------------- */

.franja-confianza {
  border-bottom: 1px solid var(--color-borde);
  background: var(--fikio-blanco);
}
.franja-confianza__lista {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
}
.franja-confianza__lista li { margin: 0; display: flex; align-items: center; gap: 0.5em; }
.franja-confianza a { color: var(--color-texto); text-decoration: none; }
.franja-confianza a:hover { color: var(--color-acento-texto); text-decoration: underline; }
.estado-apertura__punto {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fikio-topo);
  flex-shrink: 0;
}
.estado-apertura.abierto .estado-apertura__punto { background: #2E7D32; }
.estado-apertura.cerrado .estado-apertura__punto { background: var(--color-error); }

@media (min-width: 900px) {
  .franja-confianza__lista {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
  }
}

/* -------------------------------------------------------------------------
   LISTA EDITORIAL — servicios y motivos de consulta
   Sustituye la rejilla de tarjetas-caja genérica por un índice numerado con
   líneas finas, al estilo de un sumario de revista. Con miniatura
   (.lista-indice--con-foto) para servicios, sin ella para /tratamos/.
   ------------------------------------------------------------------------- */

.lista-indice { border-top: 1px solid var(--fikio-arena); }

.item-indice {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--fikio-arena);
  text-decoration: none;
  color: inherit;
  transition: background var(--duracion) var(--easing), padding-left var(--duracion) var(--easing);
}
.lista-indice--con-foto .item-indice { grid-template-columns: 2.25rem 72px 1fr auto; }
@media (min-width: 640px) {
  .lista-indice--con-foto .item-indice { grid-template-columns: 2.75rem 96px 1fr auto; }
}

.item-indice:hover {
  background: var(--fikio-crema);
  padding-left: var(--sp-2);
}

.item-indice__numero { font-size: var(--fs-lg); }

.item-indice__foto { width: 72px; height: 72px; overflow: hidden; flex-shrink: 0; }
@media (min-width: 640px) { .item-indice__foto { width: 96px; height: 96px; } }
.item-indice__foto img { width: 100%; height: 100%; object-fit: cover; }

.item-indice__etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fikio-oro-oscuro);
  margin-bottom: 0.2em;
}

.item-indice__cuerpo h3 {
  font-family: var(--fuente-cuerpo);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 0.25em;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duracion) var(--easing);
}
.item-indice:hover .item-indice__cuerpo h3 { text-decoration-color: var(--fikio-oro); }
.item-indice__cuerpo p { color: var(--color-texto-secundario); font-size: var(--fs-sm); margin: 0; }

.item-indice__flecha {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--fikio-oro-oscuro);
  transition: transform var(--duracion) var(--easing);
}
.item-indice:hover .item-indice__flecha { transform: translateX(6px); }

/* -------------------------------------------------------------------------
   TABLA DE TARIFAS
   ------------------------------------------------------------------------- */

.tabla-envoltorio { overflow-x: auto; }
.tabla-tarifas {
  width: 100%;
  font-size: var(--fs-base);
  border-top: 2px solid var(--fikio-oro);
}
.tabla-tarifas th, .tabla-tarifas td {
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  text-align: left;
  border-bottom: 1px solid var(--fikio-arena);
}
.tabla-tarifas thead th {
  padding-top: var(--sp-2);
  color: var(--color-texto-secundario);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tabla-tarifas tbody tr:last-child td { border-bottom: 1px solid var(--fikio-tinta); }
.tabla-tarifas tbody td:first-child { font-family: var(--fuente-display); font-size: var(--fs-md); }
.tabla-tarifas td:last-child { font-weight: 600; color: var(--fikio-oro-oscuro); font-size: var(--fs-md); text-align: right; }
.tabla-tarifas th:last-child { text-align: right; }
.tabla-tarifas__nota { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--color-texto-secundario); }

/* -------------------------------------------------------------------------
   LA CLÍNICA — columnas asimétricas
   ------------------------------------------------------------------------- */

.dos-columnas-asimetricas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 860px) {
  .dos-columnas-asimetricas { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-6); }
  .dos-columnas-asimetricas--invertida { grid-template-columns: 0.9fr 1.1fr; }
  .dos-columnas-asimetricas--invertida .dos-columnas-asimetricas__imagen { order: -1; }
}
.dos-columnas-asimetricas__imagen { padding: 0 var(--sp-2) var(--sp-2) 0; }
@media (min-width: 860px) {
  .dos-columnas-asimetricas__imagen { box-shadow: 14px 14px 0 0 var(--fikio-oro); padding: 0; margin-right: var(--sp-2); }
  .dos-columnas-asimetricas--invertida .dos-columnas-asimetricas__imagen { margin-right: 0; margin-left: var(--sp-2); }
}

/* -------------------------------------------------------------------------
   ACORDEÓN FAQ (details/summary)
   ------------------------------------------------------------------------- */

.acordeon-faq { border-top: 1px solid var(--fikio-arena); }
.acordeon-faq details {
  border-bottom: 1px solid var(--fikio-arena);
  background: transparent;
  padding: 0;
}
.acordeon-faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) 0;
  font-family: var(--fuente-display);
  font-weight: 500;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.acordeon-faq summary::-webkit-details-marker { display: none; }
.acordeon-faq summary .icono-mas { flex-shrink: 0; color: var(--fikio-oro-oscuro); transition: transform var(--duracion) var(--easing); }
.acordeon-faq details[open] summary .icono-mas { transform: rotate(45deg); }
.acordeon-faq__respuesta { padding: 0 0 var(--sp-3); color: var(--color-texto-secundario); }
.acordeon-faq__respuesta p { max-width: none; }

/* -------------------------------------------------------------------------
   REJILLA DE MÉTODO — 4 principios en /la-clinica/, sin cajas: solo un
   filete de oro arriba y un numeral, igual que el resto del índice editorial.
   ------------------------------------------------------------------------- */

.rejilla-metodo { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .rejilla-metodo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla-metodo { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }
@media (min-width: 1024px) { .rejilla-metodo--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rejilla-metodo--2 { grid-template-columns: repeat(2, 1fr); } }
.item-metodo { border-top: 2px solid var(--fikio-oro); padding-top: var(--sp-2); }
.item-metodo .numeral { display: block; font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.item-metodo h3, .item-metodo h2 { font-family: var(--fuente-cuerpo); font-size: var(--fs-md); font-weight: 600; margin-bottom: 0.4em; }
.item-metodo p { color: var(--color-texto-secundario); font-size: var(--fs-sm); margin: 0; }
.item-metodo .kicker { margin-bottom: 0.6em; }

/* Cita destacada en páginas interiores (esquinas cuadradas, a diferencia de
   .home-clinica__cita que es exclusiva de la home). Usada en /metodo/. */
.cita-destacada {
  border-left: 4px solid var(--fikio-oro);
  background: var(--color-fondo-alterno);
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--ancho-lectura);
  margin: var(--sp-4) 0;
}
.cita-destacada p {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--fikio-tinta);
  max-width: none;
}

/* -------------------------------------------------------------------------
   FORMULARIO DE CONTACTO
   ------------------------------------------------------------------------- */

.formulario { display: flex; flex-direction: column; gap: var(--sp-3); }
.campo { display: flex; flex-direction: column; gap: 0.4em; }
.campo label { font-weight: 600; font-size: var(--fs-sm); }
.campo .opcional { font-weight: 400; color: var(--color-texto-secundario); }
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: var(--fs-base);
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--fikio-blanco);
  color: var(--color-texto);
  width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--fikio-oro-oscuro);
}
.campo textarea { resize: vertical; min-height: 7em; }
.campo-fila { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 560px) { .campo-fila { grid-template-columns: 1fr 1fr; } }

.campo[data-invalido="true"] input,
.campo[data-invalido="true"] select,
.campo[data-invalido="true"] textarea {
  border-color: var(--color-error);
}
.campo__error {
  display: none;
  color: var(--color-error);
  font-size: var(--fs-sm);
}
.campo[data-invalido="true"] .campo__error { display: block; }

.campo-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--fs-sm);
  color: var(--color-texto-secundario);
}
.campo-consentimiento input { width: auto; margin-top: 0.25em; flex-shrink: 0; }
.campo-consentimiento a { color: var(--color-acento-texto); }

.formulario__estado {
  padding: var(--sp-2);
  border-radius: var(--radio-sm);
  font-size: var(--fs-sm);
  display: none;
}
.formulario__estado[data-visible="true"] { display: block; }
.formulario__estado--ok { background: #E6F4EA; color: #1E4620; }
.formulario__estado--error { background: #FCE8E6; color: var(--color-error); }

.formulario__aviso {
  padding: var(--sp-2);
  border-radius: var(--radio-sm);
  background: var(--color-fondo-alterno);
  color: var(--color-texto-secundario);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}

/* Honeypot antispam: oculto para personas, visible para bots que rellenan
   todos los campos del formulario sin ejecutar CSS. */
.campo-trampa { position: absolute; left: -9999px; top: -9999px; }

/* -------------------------------------------------------------------------
   HORARIO
   ------------------------------------------------------------------------- */

.bloque-horario__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.tabla-horario { width: 100%; font-size: var(--fs-sm); }
.tabla-horario td { padding: 0.4em 0.6em; border-bottom: 1px solid var(--color-borde); }
.tabla-horario td:first-child { font-weight: 600; }
.tabla-horario tr:last-child td { border-bottom: none; }
.tabla-horario tr[aria-current="true"] { background: var(--color-fondo-alterno); }
.tabla-horario tr[aria-current="true"] td:first-child { color: var(--color-acento-texto); }
.tabla-horario tr[aria-current="true"] td { color: var(--fikio-tinta); }
/* El pie de página tiene fondo oscuro y texto blanco por defecto (.pie): la
   fila resaltada usa un fondo claro, así que aqui el texto debe volver a ser
   oscuro para no quedar en blanco-sobre-claro casi ilegible. */

/* -------------------------------------------------------------------------
   FOOTER — rediseño "Propuesta B" (componente compartido en todo el sitio)
   ------------------------------------------------------------------------- */

.pie {
  background: var(--fikio-blanco);
  color: var(--fikio-tinta);
  border-top: 1px solid var(--pb-borde-suave);
  padding: 80px 0 28px;
}
.pie a { color: var(--fikio-tinta); }
.pie__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
}
.pie__marca img { height: 46px; width: auto; margin-bottom: var(--sp-2); }
.pie__marca p { color: var(--fikio-gris); max-width: 30ch; font-size: var(--fs-sm); }
.pie h3 {
  font-family: var(--fuente-cuerpo);
  color: var(--fikio-oro-oscuro);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--sp-2);
}
.pie nav ul, .pie__contacto ul, .pie__horario {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.pie__contacto li, .pie__horario p { color: var(--fikio-gris); font-size: var(--fs-sm); margin: 0; }
.pie nav a, .pie__contacto a { text-decoration: none; font-size: var(--fs-sm); color: var(--fikio-gris); }
.pie nav a:hover, .pie__contacto a:hover { color: var(--fikio-oro-oscuro); text-decoration: underline; }
/* El handoff pide --fikio-topo (#9A8B87) aquí, pero sobre fondo blanco no
   cumple contraste (3.3:1, ver política al principio de este fichero) —
   se usa --fikio-gris en su lugar, que sí cumple. */
.pie__legal {
  border-top: 1px solid var(--pb-borde-suave);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fikio-gris);
}
.pie__legal ul { list-style: none; display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: 0; margin: 0; }
.pie__legal a { font-size: var(--fs-sm); color: var(--fikio-gris); }
.pie__legal a:hover { color: var(--fikio-oro-oscuro); text-decoration: underline; }

/* -------------------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------------------- */

.whatsapp-flotante {
  position: fixed;
  right: var(--sp-2);
  bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--fikio-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: transform var(--duracion) var(--easing), background var(--duracion) var(--easing);
}
.whatsapp-flotante:hover { background: var(--color-whatsapp-oscuro); transform: scale(1.05); }
.whatsapp-flotante svg { width: 30px; height: 30px; }

@media (max-width: 767px) {
  .whatsapp-flotante { display: none; }
}

/* -------------------------------------------------------------------------
   BARRA DE ACCIONES FIJA EN MÓVIL
   ------------------------------------------------------------------------- */

.barra-movil {
  display: none;
}
@media (max-width: 767px) {
  .barra-movil {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150;
    background: var(--fikio-blanco);
    border-top: 1px solid var(--color-borde);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .barra-movil a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    padding: 0.6em 0.4em;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--fikio-tinta);
    border-right: 1px solid var(--color-borde);
  }
  .barra-movil a:last-child { border-right: none; }
  .barra-movil a svg { width: 22px; height: 22px; }
  .barra-movil a.barra-movil__reservar { background: var(--fikio-oro); color: var(--fikio-carbon); }
  .barra-movil a.barra-movil__whatsapp { color: var(--color-whatsapp-oscuro); }
}

/* -------------------------------------------------------------------------
   MAPA CON CARGA DIFERIDA
   ------------------------------------------------------------------------- */

.mapa-diferido {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--color-fondo-alterno);
}
.mapa-diferido img { width: 100%; height: 100%; object-fit: cover; }
.mapa-diferido__boton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  background: var(--fikio-carbon);
  color: var(--fikio-blanco);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  transition: background var(--duracion) var(--easing);
}
.mapa-diferido__boton:hover { background: var(--fikio-tinta); }
.mapa-diferido__boton svg { width: 32px; height: 32px; }
.mapa-diferido iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -------------------------------------------------------------------------
   AVISO {{PLACEHOLDER}} (páginas legales / contenido pendiente de revisión)
   ------------------------------------------------------------------------- */

.aviso-pendiente {
  background: #FFF6E0;
  border: 1px solid var(--fikio-oro);
  border-radius: var(--radio-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fikio-tinta);
  margin-bottom: var(--sp-4);
}
.aviso-pendiente strong { color: var(--fikio-oro-oscuro); }
.aviso-pendiente-inline { color: var(--fikio-oro-oscuro); font-style: italic; overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */

.pagina-404 { text-align: center; padding-block: var(--sp-7); }
.pagina-404__codigo {
  font-family: var(--fuente-display);
  font-size: clamp(4rem, 3rem + 5vw, 8rem);
  color: var(--fikio-oro-claro);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.pagina-404 p { margin-inline: auto; }
.pagina-404 .grupo-botones { justify-content: center; margin-top: var(--sp-3); }

/* -------------------------------------------------------------------------
   BLOQUE DE RESEÑAS (vacío, a la espera de reseñas reales)
   ------------------------------------------------------------------------- */

.resenas-vacio {
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-4);
  text-align: center;
  color: var(--color-texto-secundario);
}

/* -------------------------------------------------------------------------
   TEXTO LEGAL
   ------------------------------------------------------------------------- */

.texto-legal h2 { font-size: var(--fs-md); font-family: var(--fuente-cuerpo); margin-top: var(--sp-4); }
.texto-legal p, .texto-legal li { color: var(--color-texto); }
.texto-legal { max-width: var(--ancho-lectura); }

/* =========================================================================
   HOME — REDISEÑO "PROPUESTA B" ("luz y aire")
   Clases exclusivas de index.html. El resto de páginas conserva el sistema
   editorial de esquinas cuadradas de arriba (.seccion, .lista-indice,
   .boton, .hero, etc.) — ver AGENTS.md y design_handoff_fikio_home/README.md.
   ========================================================================= */

.home-seccion { padding-block: 120px; }
@media (max-width: 1023px) { .home-seccion { padding-block: 80px; } }

.home-cabecera-seccion { max-width: 620px; margin-inline: auto; text-align: center; margin-bottom: var(--sp-6); }
.home-cabecera-seccion p { margin-inline: auto; color: var(--fikio-gris); font-size: var(--fs-md); }

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fikio-oro-oscuro);
  margin-bottom: var(--sp-2);
}

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

.home-hero { padding: 72px 0 0; }
.home-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .home-hero__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

.home-chip-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--fikio-crema);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fikio-oro-oscuro);
  margin-bottom: var(--sp-4);
}
.home-chip-estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--fikio-topo); flex-shrink: 0; }
.home-chip-estado.abierto .home-chip-estado__punto { background: var(--pb-verde-abierto); }
.home-chip-estado.cerrado .home-chip-estado__punto { background: var(--color-error); }

.home-hero__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(2.8rem, 1.9rem + 4.5vw, 5.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin-bottom: var(--sp-4);
  color: var(--fikio-tinta);
}
.home-hero__titulo em { font-style: italic; font-weight: 500; color: var(--fikio-oro-oscuro); }
.home-hero__lead { font-size: 20px; font-weight: 400; line-height: 1.65; color: var(--fikio-gris); max-width: 42ch; margin-bottom: var(--sp-4); }
.home-hero__botones { margin-bottom: var(--sp-5); }

.home-hero__datos {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--pb-borde-cabecera);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) 36px;
}
.home-hero__datos li { margin: 0; }
.home-hero__cifra { display: block; font-family: var(--fuente-display); font-size: 34px; font-weight: 500; line-height: 1; color: var(--fikio-tinta); margin-bottom: 6px; }
.home-hero__etiqueta { display: block; font-size: var(--fs-sm); color: var(--fikio-gris); max-width: 16ch; }

.home-hero__media { position: relative; }
.home-hero__foto { aspect-ratio: 4 / 5; border-radius: 280px 280px 24px 24px; overflow: hidden; }
.home-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__tarjeta {
  background: var(--fikio-blanco);
  border-radius: 18px;
  padding: var(--sp-4) 28px;
  max-width: 270px;
  box-shadow: 0 18px 48px rgba(23, 30, 37, 0.14);
  margin: -40px auto 0;
  position: relative;
  z-index: 2;
}
@media (min-width: 640px) {
  .home-hero__tarjeta { position: absolute; left: -36px; bottom: 56px; margin: 0; }
}
.home-hero__tarjeta-kicker { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fikio-oro-oscuro); margin-bottom: var(--sp-1); }
.home-hero__tarjeta-titulo { font-family: var(--fuente-display); font-size: 22px; font-weight: 500; margin-bottom: var(--sp-1); color: var(--fikio-tinta); }
.home-hero__tarjeta-pie { font-size: var(--fs-sm); color: var(--fikio-gris); margin: 0; }

/* --- Servicios ------------------------------------------------------------ */

.home-servicios__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 640px) { .home-servicios__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .home-servicios__grid { grid-template-columns: repeat(3, 1fr); } }

.home-tarjeta-servicio {
  display: flex;
  flex-direction: column;
  background: var(--fikio-blanco);
  border: 1px solid var(--pb-borde-suave);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease-out;
}
.home-tarjeta-servicio:hover { border-color: var(--fikio-oro); }
.home-tarjeta-servicio__foto { aspect-ratio: 3 / 2; overflow: hidden; }
.home-tarjeta-servicio__foto img { width: 100%; height: 100%; object-fit: cover; }
.home-tarjeta-servicio__cuerpo { padding: var(--sp-4) 28px calc(var(--sp-4) + 2px); display: flex; flex-direction: column; flex: 1 1 auto; }
.home-tarjeta-servicio__kicker { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fikio-oro-oscuro); margin-bottom: var(--sp-2); }
.home-tarjeta-servicio__cuerpo h3 { font-family: var(--fuente-display); font-size: 25px; font-weight: 500; margin-bottom: var(--sp-1); color: var(--fikio-tinta); }
.home-tarjeta-servicio__cuerpo p { font-size: var(--fs-sm); color: var(--fikio-gris); margin-bottom: var(--sp-2); }
.home-tarjeta-servicio__enlace { font-size: var(--fs-sm); font-weight: 600; color: var(--fikio-tinta); border-bottom: 1.5px solid var(--fikio-oro); padding-bottom: 2px; margin-top: auto; align-self: flex-start; }

/* --- Cómo funciona --------------------------------------------------------- */

.home-panel { background: var(--fikio-blanco); border: 1px solid var(--pb-borde-suave); border-radius: 28px; padding: var(--sp-6) var(--sp-3); }
@media (min-width: 640px) { .home-panel { padding: var(--sp-6) 56px; } }
.home-panel__enlace { margin-top: var(--sp-4); font-weight: 600; }
.home-panel__enlace a { color: var(--fikio-oro-oscuro); }

.home-pasos { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) { .home-pasos { grid-template-columns: repeat(3, 1fr); } }
.home-paso__fila { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.home-paso__numero {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--fikio-crema);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-display);
  font-size: 20px;
  color: var(--fikio-oro-oscuro);
  flex-shrink: 0;
}
.home-paso__linea { flex: 1; height: 1px; background: var(--pb-borde-suave); }
.home-pasos h3 { font-family: var(--fuente-cuerpo); font-size: 19px; font-weight: 600; margin-bottom: var(--sp-1); color: var(--fikio-tinta); }
.home-pasos p { font-size: var(--fs-sm); color: var(--fikio-gris); margin: 0; }

/* --- Qué tratamos ----------------------------------------------------------- */

.home-tratamos__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 900px) { .home-tratamos__grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; } }
.home-tratamos__intro p { max-width: 36ch; color: var(--fikio-gris); margin-bottom: var(--sp-4); }

.home-motivos { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 560px) { .home-motivos { grid-template-columns: 1fr 1fr; } }

.home-tarjeta-motivo {
  display: block;
  background: var(--fikio-blanco);
  border: 1px solid var(--pb-borde-suave);
  border-radius: 18px;
  padding: 26px var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease-out;
}
.home-tarjeta-motivo:hover { border-color: var(--fikio-oro); }
.home-tarjeta-motivo__etiqueta {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fikio-oro-oscuro);
  margin-bottom: var(--sp-1);
}
.home-tarjeta-motivo__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.home-tarjeta-motivo__fila h3 { font-size: 17px; font-weight: 600; margin: 0; color: var(--fikio-tinta); }
.home-tarjeta-motivo__flecha { color: var(--fikio-oro-oscuro); font-family: var(--fuente-display); flex-shrink: 0; }
.home-tarjeta-motivo p { font-size: 14px; color: var(--fikio-gris); margin: 0; }

.home-tarjeta-escape {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--fikio-crema);
  border-radius: 18px;
  padding: 26px var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fikio-oro-oscuro);
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.home-tarjeta-escape:hover { background: var(--fikio-oro); color: var(--fikio-tinta); }

/* --- La clínica -------------------------------------------------------------- */

.home-clinica { background: var(--fikio-crema); }
.home-clinica__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) { .home-clinica__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.home-clinica__texto h2 { max-width: 20ch; }
.home-clinica__lead { font-size: 19px; color: #3F3B39; }
.home-clinica__parrafo { font-size: var(--fs-base); color: var(--fikio-gris); }

.home-clinica__cita { background: var(--fikio-blanco); border-radius: 20px; padding: var(--sp-4) 30px; max-width: 460px; margin: var(--sp-3) 0 var(--sp-4); }
.home-clinica__cita p { font-family: var(--fuente-display); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--fikio-tinta); margin-bottom: var(--sp-2); }
.home-clinica__cita cite { display: block; font-style: normal; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fikio-oro-oscuro); }

.home-clinica__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.home-clinica__fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
.home-clinica__foto-ancha { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
.home-clinica__foto-cuadrada { aspect-ratio: 1; }

/* --- Reseñas ------------------------------------------------------------------- */

.home-resenas__valoracion { font-size: var(--fs-sm); color: var(--fikio-gris); margin-top: 0; }
.home-resenas__valoracion strong { color: var(--fikio-tinta); }
.home-resenas__valoracion a { color: var(--fikio-oro-oscuro); }
.home-resenas__fecha-dato { font-size: 0.9em; opacity: 0.75; }

.home-resenas-carrusel { max-width: 640px; margin: 0 auto var(--sp-4); }

.home-resena { text-align: center; padding-block: var(--sp-3); }
.home-resena + .home-resena { border-top: 1px solid var(--pb-borde-suave); }
/* Sin JS (o con prefers-reduced-motion sin soporte de :has), se ven las 5
   reseñas apiladas como una lista — sigue siendo perfectamente utilizable. */
.js .home-resena { display: none; }
.js .home-resena.activa { display: block; border-top: none; animation: home-resena-entra 400ms ease; }
@media (prefers-reduced-motion: reduce) {
  .js .home-resena.activa { animation: none; }
}
@keyframes home-resena-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

.home-resena__estrellas { color: var(--fikio-oro); font-size: 14px; letter-spacing: 3px; margin-bottom: var(--sp-2); }
.home-resena__texto { font-family: var(--fuente-display); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--fikio-tinta); margin-bottom: var(--sp-2); }
.home-resena__pie { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.home-resena__autor { font-style: normal; font-weight: 600; font-size: var(--fs-sm); color: var(--fikio-tinta); }
.home-resena__fecha { font-size: 13px; color: var(--fikio-gris); }

.home-resenas-carrusel__controles { display: none; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.js .home-resenas-carrusel__controles { display: flex; }
.home-resenas-carrusel__flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--pb-borde-suave); background: var(--fikio-blanco);
  color: var(--fikio-tinta); cursor: pointer; font-size: 20px; line-height: 1;
  transition: border-color 150ms ease-out;
}
.home-resenas-carrusel__flecha:hover { border-color: var(--fikio-oro); }
.home-resenas-carrusel__puntos { display: flex; align-items: center; gap: var(--sp-1); }
.home-resenas-carrusel__punto {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
  background: var(--pb-borde-suave); cursor: pointer;
}
.home-resenas-carrusel__punto.activo { background: var(--fikio-oro); }

/* --- Tarifas ------------------------------------------------------------------ */

.home-tarifas__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); align-items: start; }
@media (min-width: 640px) { .home-tarifas__grid { grid-template-columns: repeat(3, 1fr); } }

.home-tarjeta-tarifa {
  border-radius: 24px;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--fikio-blanco);
  border: 1px solid var(--pb-borde-suave);
  color: var(--fikio-tinta);
}
.home-tarjeta-tarifa--destacada { background: var(--fikio-tinta); color: var(--fikio-blanco); border-color: transparent; }
.home-tarjeta-tarifa__etiqueta { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fikio-oro-oscuro); }
.home-tarjeta-tarifa--destacada .home-tarjeta-tarifa__etiqueta { color: var(--fikio-oro); }
.home-tarjeta-tarifa h3 { font-family: var(--fuente-display); font-size: 24px; font-weight: 500; margin: 0; color: inherit; }
.home-tarjeta-tarifa__precio { font-family: var(--fuente-display); font-size: 52px; font-weight: 500; line-height: 1; color: var(--fikio-oro-oscuro); }
.home-tarjeta-tarifa--destacada .home-tarjeta-tarifa__precio { color: var(--fikio-oro); }
.home-tarjeta-tarifa__duracion { font-size: var(--fs-sm); color: var(--fikio-gris); }
.home-tarjeta-tarifa--destacada .home-tarjeta-tarifa__duracion { color: var(--fikio-arena); }
.home-tarjeta-tarifa__descripcion { font-size: var(--fs-sm); color: var(--fikio-gris); margin: 0; }
.home-tarjeta-tarifa--destacada .home-tarjeta-tarifa__descripcion { color: var(--fikio-arena); }
.home-tarjeta-tarifa .boton-pastilla { margin-top: var(--sp-2); padding: 15px 22px; }

/* --- FAQ ------------------------------------------------------------------------ */

.home-faq { max-width: 1000px; margin-inline: auto; }
.home-faq details {
  background: var(--fikio-blanco);
  border: 1px solid var(--pb-borde-suave);
  border-radius: 18px;
  padding-inline: 28px;
  margin-bottom: var(--sp-2);
}
.home-faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 26px;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--fikio-tinta);
}
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary .icono-mas { width: 1.3em; height: 1.3em; color: var(--fikio-oro-oscuro); flex-shrink: 0; transition: transform 150ms ease-out; }
.home-faq details[open] summary .icono-mas { transform: rotate(45deg); }
.home-faq__respuesta { padding-bottom: 26px; color: var(--fikio-gris); max-width: 62ch; }
.home-faq__respuesta p { margin: 0; max-width: none; }
.home-faq__mas { text-align: center; margin-top: var(--sp-4); }

/* --- CTA final -------------------------------------------------------------------- */

.home-cta { background: var(--fikio-tinta); border-radius: 32px; padding: var(--sp-6) var(--sp-3); }
@media (min-width: 640px) { .home-cta { padding: 80px 64px; } }
.home-cta__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: center; }
@media (min-width: 860px) { .home-cta__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-6); } }
.home-cta h2 { color: var(--fikio-blanco); max-width: 22ch; margin-bottom: 0; }
.home-cta__lead { font-size: 19px; color: var(--fikio-oro-claro); max-width: 40ch; margin-top: var(--sp-2); }
.home-cta__botones { display: flex; flex-direction: column; gap: 14px; }
.home-cta__botones .boton-pastilla { width: 100%; }
.home-cta__estado { text-align: center; font-size: var(--fs-sm); color: var(--fikio-topo); margin-top: var(--sp-1); }
.home-cta__estado a { color: var(--fikio-topo); }
.home-cta__estado a:hover { color: var(--fikio-oro-claro); }

.home-cta__logo {
  display: block;
  height: 104px;
  width: auto;
  margin: 0 auto var(--sp-3);
  opacity: .92;
}
@media (max-width: 600px) { .home-cta__logo { height: 78px; } }