/* =====================================================================
   site.css — estilos propios de la web (fuentes, menú, FAQ, animaciones).
   Los estilos generales (colores, tamaños, rejillas) vienen de tailwind.css.
   Para retoques tuyos usa custom.css (se carga al final y gana a todo).
   ===================================================================== */

/* ---- Fuentes (alojadas en tu propio servidor, carpeta /fonts) ---- */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-garamond-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-garamond-latin-wght-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Base ---- */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}
button:disabled{opacity:.6;cursor:wait}

/* ---- Cabecera (transparente arriba, crema al bajar) ---- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:50;padding:1.5rem 0;color:#FAF9F6;border-bottom:1px solid transparent;transition:background-color .5s,padding .5s,color .3s,border-color .5s}
.site-header.is-scrolled{background:rgba(250,249,246,.85);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom-color:rgba(26,26,26,.08);padding:1rem 0;color:#1A1A1A}
.nav-link{color:inherit;opacity:.85;transition:color .3s,opacity .3s}
.nav-link:hover{color:#C5A880;opacity:1}
.nav-book{display:inline-block;padding:.75rem 1.5rem;background:#FAF9F6;color:#1A1A1A;font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:background-color .3s,color .3s}
.nav-book:hover{background:#C5A880;color:#FAF9F6}
.is-scrolled .nav-book{background:#1A1A1A;color:#FAF9F6}
.is-scrolled .nav-book:hover{background:#C5A880}
.lang-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.25rem;transition:color .3s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover{color:#C5A880}
.lang-menu .ic{transition:transform .2s}
.lang-menu[open] .ic{transform:rotate(180deg)}
.nav-toggle{color:inherit}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
.nav-toggle[aria-expanded="true"] .ic-menu{display:none}
.mobile-menu{background:#FAF9F6;color:#1A1A1A;border-top:1px solid rgba(26,26,26,.08);margin-top:1rem}

/* ---- Animaciones de entrada ---- */
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-in{animation:fade-up .9s cubic-bezier(.25,.1,.25,1) both;animation-delay:var(--d,0s)}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.25,.1,.25,1) var(--delay,0s),transform .8s cubic-bezier(.25,.1,.25,1) var(--delay,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---- FAQ (preguntas desplegables) ---- */
.faq-item summary{list-style:none;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{transition:transform .3s}
.faq-item[open] .faq-plus{transform:rotate(45deg)}

/* ---- Testimonios (sin JavaScript se ven todos seguidos) ---- */
.testimonial + .testimonial{margin-top:2.5rem}
.testimonial-controls{display:none}
.js .testimonial-controls{display:flex}
.js .testimonial + .testimonial{margin-top:0}
.js .testimonial:not(.is-active){display:none}
.js .testimonial.is-active{animation:fade-up .5s cubic-bezier(.25,.1,.25,1) both}
.dot{height:.375rem;width:.375rem;padding:0;border:0;background:rgba(26,26,26,.25);transition:all .3s}
.dot.is-active{width:2rem;background:#C5A880}

/* ---- Formulario ---- */
.subject-pill span{display:block;padding:.625rem 1.25rem;font-size:11px;letter-spacing:.15em;text-transform:uppercase;border:1px solid rgba(26,26,26,.2);color:rgba(26,26,26,.7);cursor:pointer;transition:all .2s}
.subject-pill:hover span{border-color:#C5A880}
.subject-pill input:checked + span{background:#1A1A1A;color:#FAF9F6;border-color:#1A1A1A}
.subject-pill input:focus-visible + span{outline:2px solid #C5A880;outline-offset:2px}
.form-status{min-height:1.5rem;font-size:.95rem;font-weight:300}
.form-status.is-ok{color:#2e7d4f}
.form-status.is-error{color:#b3261e}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-in,.js .testimonial.is-active{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Clases de diseño que Tailwind no llegó a generar (FAQ y galería) ---- */
.divide-\[\#1A1A1A\]\/12 > :not([hidden]) ~ :not([hidden]){border-color:rgba(26,26,26,.12)}
.border-\[\#1A1A1A\]\/12{border-color:rgba(26,26,26,.12)}
.duration-\[1\.1s\]{transition-duration:1.1s}

/* ---- Clases de la ficha "De un vistazo" que Tailwind no había generado ---- */
.gap-x-10{column-gap:2.5rem}
.gap-y-6{row-gap:1.5rem}
@media (min-width:640px){.sm\:text-base{font-size:1rem;line-height:1.5rem}}