/* ============================================================
   Turismo Cáceres — BASE (reset, variables, tipografía, utils)
   Portado del diseño Fusion (index.html)
   ============================================================ */
/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: #1a1a1a;
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* =========================================================
   VARIABLES
   ========================================================= */
:root {
  /* Paleta y tipografía por omisión del diseño Fusion.
     Son un respaldo: el tema imprime estas mismas variables con los valores de
     «Enfold → Turismo Cáceres» en una etiqueta <style> posterior a esta hoja,
     así que lo que se elija en el panel manda. Si Enfold no estuviera activo,
     el diseño sigue viéndose con estos valores. */
  --gold:     #B8956A;  /* dorado marca — acentos, líneas, fondos */
  --gold-dk:  #9A7A54;
  --gold-hi:  #CDA97D;  /* dorado claro — hover de botón (texto oscuro) */
  --gold-lt:  #F2E4CC;  /* champán claro — texto sobre foto (AA en todo viewport) */
  --dark:     #2e0b0c;
  --mid:      #5a1a1c;
  --gray:     #6b6b6b;
  --cream:    #FAF8F5;
  --border:   #E8E3DC;
  --white:    #ffffff;

  --font-head: 'Ovo', serif;
  --font-body: 'Mulish', sans-serif;
}


/* =========================================================
   UTILS
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/* =========================================================
   ANIMACIONES DE ENTRADA (estilo Enfold: fade + desplazamiento)
   Se activan sólo con .av-anim (añadido por JS si hay soporte y
   no hay prefers-reduced-motion). Sin JS → todo visible.
   ENFOLD: equivale a la opción "Animation" de cada elemento
   (av_animation: fade / slide top-to-bottom, etc.).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* La lista tiene que ser LA MISMA que la de reveal() en js/tc-theme.js: aquí
     se esconde, allí se revela. Si un selector está sólo aquí, el bloque se
     queda invisible para siempre —le pasó a la caja del boletín, que estaba
     como `.newsletter > div` mientras el JS vigilaba `.news__body`—. Por eso
     abajo hay un cinturón que devuelve a la vista lo que el JS no vigile. */
  .av-anim .hero-content,
  .av-anim .section-header,
  .av-anim .intro-aside,
  .av-anim .intro-text,
  .av-anim .exp-carousel,
  .av-anim .ed-main,
  .av-anim .ed-small,
  .av-anim .stat-item,
  .av-anim .destino-card,
  .av-anim .gastro-img-wrap,
  .av-anim .gastro-content,
  .av-anim .event-item,
  .av-anim .arch-card,
  .av-anim .events-visual,
  .av-anim .plan-cta-content,
  .av-anim .news__body,
  .av-anim .news__media,
  .av-anim .tl-steps li,
  .av-anim .resource-card,
  .av-anim .post-featured,
  .av-anim .info-card,
  .av-anim .detail-body,
  .av-anim .detail-media,
  .av-anim .detail-aside,
  .av-anim .route-stop,
  .av-anim .footer-brand,
  .av-anim .footer-col {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }

  .av-anim .av-from-left  { transform: translateX(-44px); }
  .av-anim .av-from-right { transform: translateX(44px); }
  .av-anim .av-in { opacity: 1 !important; transform: none !important; }

  /* --- Cinturón de seguridad ------------------------------------------------
     El JS marca con .av-reveal cada bloque que va a vigilar, y pone .av-ready
     en <html> al terminar de montar el observador. Así, cualquier bloque que
     esta hoja esconda pero el JS no vigile —porque su selector falte en la
     lista de reveal()— vuelve a la vista en cuanto el JS acaba, en lugar de
     quedarse en opacity 0 sin que nadie se dé cuenta.

     No es un parche del fallo: es lo que hace que el fallo no pueda volver a
     dejar una sección invisible. */
  .av-anim.av-ready :is(
    .hero-content, .section-header, .intro-aside, .intro-text, .exp-carousel,
    .ed-main, .ed-small, .stat-item, .destino-card, .gastro-img-wrap,
    .gastro-content, .event-item, .arch-card, .events-visual, .plan-cta-content,
    .news__body, .news__media, .tl-steps li, .resource-card, .post-featured,
    .info-card, .detail-body, .detail-media, .detail-aside, .route-stop,
    .footer-brand, .footer-col
  ):not(.av-reveal) {
    opacity: 1;
    transform: none;
  }
}