/* =============================================================
   EN CORTO — Diseño v2
   Capa de rediseño sobre app.css

   Qué es esto y por qué está aparte
   -------------------------------------------------------------
   Esta hoja se carga DESPUÉS de app.css y reescribe lo que hace
   que una interfaz se sienta bien o se sienta barata: el
   movimiento, los materiales, la tipografía y los estados de
   respuesta. No toca el color: el bermellón del monumento es la
   identidad y no está a discusión.

   Va aparte y no dentro de app.css por una razón práctica: se
   enciende y se apaga desde Ajustes, así que se pueden comparar
   los dos diseños en vivo y volver atrás sin deshacer nada.

   De dónde salen las reglas
   -------------------------------------------------------------
   De las especificaciones de github.com/emilkowalski/skills
   (design engineering y principios de interfaz de Apple). Las
   cuatro que mandan sobre todo lo demás:

     1. Sólo se anima `transform` y `opacity`. Lo demás obliga al
        navegador a recalcular la página en cada cuadro.
     2. Nada de interfaz pasa de 300 ms, y nada usa `ease-in`:
        retrasa el arranque justo cuando la gente está mirando.
     3. Nada desaparece desde cero ni aparece desde cero. En la
        naturaleza las cosas se van encogiendo, no se apagan.
     4. El `hover` sólo existe donde hay ratón. En un teléfono el
        navegador lo dispara al tocar y se queda pegado.
   ============================================================= */

/* =============================================================
   1 · Movimiento: las curvas y los tiempos
   -------------------------------------------------------------
   Tres curvas para tres trabajos distintos, y no las del
   navegador: `ease` y `ease-out` de fábrica son tan suaves que
   no se leen como intención, sólo como retraso.
   ============================================================= */
:root {
  --sal:    cubic-bezier(.23, 1, .32, 1);        /* entra y sale de pantalla */
  --mueve:  cubic-bezier(.77, 0, .175, 1);       /* se mueve dentro de pantalla */
  --cajon:  cubic-bezier(.32, .72, 0, 1);        /* hojas y cajones, como iOS */

  /* Cuanto más se repite algo al día, más corto tiene que ser. */
  --t-toque:   120ms;   /* apretar un botón */
  --t-pista:   160ms;   /* pistas, globos, cambios de color */
  --t-menu:    200ms;   /* desplegables */
  --t-ventana: 260ms;   /* ventanas y hojas */
  --t-sale:    150ms;   /* salir siempre es más rápido que entrar */

  /* Materiales: el cristal de las barras que flotan sobre el contenido. */
  --vidrio:      color-mix(in srgb, var(--card) 74%, transparent);
  --vidrio-alto: color-mix(in srgb, var(--card) 86%, transparent);
  --brillo:      inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* En oscuro el brillo del canto es más tenue, si no parece un filo.
   Los dos caminos al tema oscuro, como en app.css: el que eligió la persona
   con el interruptor y el que trae puesto el sistema. El segundo TIENE que ir
   dentro de la consulta de medios; suelto, `:not([data-theme="light"])`
   también acierta en claro y pinta de oscuro un sitio claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brillo: inset 0 1px 0 rgba(255, 255, 255, .07); }
}
:root[data-theme="dark"] { --brillo: inset 0 1px 0 rgba(255, 255, 255, .07); }

/* =============================================================
   2 · Tipografía
   -------------------------------------------------------------
   El interletraje NO es un valor para todos los tamaños. Un
   título de 44 px con el mismo tracking que un pie de foto se ve
   suelto; el pie con el del título se ve apretado. Va cerrándose
   conforme la letra crece, y la interlínea al revés: apretada en
   los títulos, holgada en el texto que se lee de corrido.
   ============================================================= */
body {
  /* En rem, no en px: así respeta el tamaño de letra del sistema
     de quien no ve bien de cerca, que aquí es media colonia. */
  font-size: 1rem;
  letter-spacing: 0;
}

h1, h2, h3, h4 {
  /* El navegador reparte los renglones para que no quede uno
     suelto con dos palabras. Es gratis y se nota en cada título. */
  text-wrap: balance;
}
h1 { letter-spacing: -.038em; line-height: 1.04; }
h2 { letter-spacing: -.028em; line-height: 1.12; }
h3 { letter-spacing: -.016em; line-height: 1.26; }
h4 { letter-spacing: -.008em; line-height: 1.32; }

p { text-wrap: pretty; }
p, li { letter-spacing: .002em; }

small, .f-xs, .f-sm, .hint {
  /* Lo chico necesita un pelo de aire entre letras para no cerrarse */
  letter-spacing: .006em;
  line-height: 1.55;
}

.lead { letter-spacing: -.006em; line-height: 1.5; }
.hero h1 { letter-spacing: -.045em; }
.detail-title h1 { letter-spacing: -.032em; line-height: 1.08; }
.biz-body h3 { letter-spacing: -.018em; }
.quick-stats b { letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* Los números que se comparan en columna van todos del mismo ancho */
.stat .v, .table td, .pager a, .pager span { font-variant-numeric: tabular-nums; }

/* =============================================================
   3 · Ritmo
   -------------------------------------------------------------
   El espacio también escala con la ventana. Una sección con
   44 px fijos se ve apretada en un monitor y desperdiciada en un
   teléfono.
   ============================================================= */
.section { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.section-head { margin-bottom: clamp(1rem, 2.4vw, 1.6rem); }

/* =============================================================
   3.bis · Profundidad
   -------------------------------------------------------------
   Una escalera de tres peldaños y no cuatro sombras parecidas.
   El truco de las sombras del diseño anterior era un anillo de
   crema para marcar el borde sobre blanco; aquí el anillo sale
   del propio color de línea, así que también funciona en oscuro,
   y la difusión es más amplia y más suave: una tarjeta apoyada,
   no una tarjeta con una mancha debajo.
   ============================================================= */
:root {
  --sh-1: 0 0 0 1px color-mix(in srgb, var(--line) 65%, transparent),
          0 1px 2px rgba(36, 19, 16, .04);
  --sh-2: 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent),
          0 2px 6px rgba(142, 42, 18, .05),
          0 10px 26px rgba(142, 42, 18, .08);
  --sh-3: 0 0 0 1px color-mix(in srgb, var(--line) 90%, transparent),
          0 6px 16px rgba(142, 42, 18, .10),
          0 24px 60px rgba(142, 42, 18, .16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-1: 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .35);
    --sh-2: 0 0 0 1px rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .45);
    --sh-3: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --sh-1: 0 0 0 1px rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 0 0 1px rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .45);
  --sh-3: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .55);
}

/* El texto sobre cristal necesita un punto más de cuerpo: al
   desenfocar lo de atrás, los remates finos se pierden. */
.site-header .nav a { font-weight: 650; }
.site-header .brand-tag { letter-spacing: .15em; }

/* El pie: es la única superficie oscura fija del sitio y se
   comporta como tal en los dos temas. */
.site-footer h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); font-weight: 700;
}
.site-footer a { transition: color var(--t-pista) var(--sal), transform var(--t-pista) var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: #fff; }
}

/* =============================================================
   4 · Estados de respuesta
   -------------------------------------------------------------
   Una interfaz se siente viva por lo que hace mientras se
   aprieta, no por lo que hace al soltar. Todo lo que se puede
   tocar se hunde un poco en el momento en que el dedo baja.
   ============================================================= */

/* El foco del teclado, uno solo para todo el sitio. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.searchbar input:focus-visible,
.searchbar select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- Botones --- */
.btn {
  /* `all` obliga al navegador a vigilar cada propiedad. Aquí se
     dice exactamente qué se mueve y qué no. */
  transition:
    transform var(--t-toque) var(--sal),
    box-shadow var(--t-pista) var(--sal),
    background-color var(--t-pista) var(--sal),
    border-color var(--t-pista) var(--sal),
    color var(--t-pista) var(--sal);
}
.btn:hover { transform: none; }              /* se devuelve abajo, con puerta */
.btn:not(:disabled):active,
.btn:not([aria-disabled="true"]):active { transform: scale(.97); transition-duration: 100ms; }

/* --- Superficies que se pueden tocar --- */
.chip, .fpill, .fdrop > summary, .action-btn, .cat-tile, .pager a, .biz-card,
.tile, .stat, .kit-pieza, .redes-pieza {
  transition:
    transform var(--t-pista) var(--sal),
    box-shadow var(--t-pista) var(--sal),
    border-color var(--t-pista) var(--sal),
    background-color var(--t-pista) var(--sal),
    color var(--t-pista) var(--sal);
}
.chip:active, .fpill:active, .fdrop > summary:active,
.action-btn:active, .pager a:active { transform: scale(.97); transition-duration: 100ms; }

/* Una tarjeta grande se hunde menos: al 97 % una ficha de 300 px
   se ve como si se doblara. */
.cat-tile:active, .biz-card:active { transform: scale(.985); transition-duration: 100ms; }

/* --- El hover, sólo donde hay un ratón de verdad --- */
.cat-tile:hover, .biz-card:hover, .action-btn:hover, .gallery a:hover img { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { transform: translateY(-1px); }
  .cat-tile:hover  { transform: translateY(-3px); }
  .biz-card:hover  { transform: translateY(-4px); }
  .action-btn:hover{ transform: translateY(-2px); }
  .gallery a:hover img { transform: scale(1.05); }
  .kit-pieza:hover, .redes-pieza:hover { border-color: var(--brand-100); }
}

/* La galería tenía `transition: .3s`, que anima hasta el color de fondo */
.gallery img { transition: transform 280ms var(--sal); }

/* Los enlaces del menú: sólo color, nunca movimiento. Se recorren
   con la vista decenas de veces al día y cualquier animación ahí
   estorba en vez de ayudar. */
.nav a {
  transition: background-color var(--t-pista) var(--sal), color var(--t-pista) var(--sal);
}

/* --- Formularios --- */
.input, .select, .textarea {
  transition:
    border-color var(--t-pista) var(--sal),
    box-shadow var(--t-pista) var(--sal),
    background-color var(--t-pista) var(--sal);
}

/* =============================================================
   5 · Materiales
   -------------------------------------------------------------
   Las barras que flotan sobre el contenido son cristal: dejan
   pasar lo que va pasando por debajo. Eso le dice a la gente que
   el contenido sigue ahí y que la barra está encima, sin ninguna
   sombra que lo explique.

   El `saturate` no es decorativo: al desenfocar, el color se
   apaga; subirlo devuelve el bermellón que se ve a través.
   ============================================================= */
.site-header {
  background: var(--vidrio);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--brillo);
}

.buscador-fijo, .sticky-actions, .nav-movil {
  background: var(--vidrio-alto);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Nunca cristal sobre cristal: el menú desplegado del teléfono va
   opaco porque cae encima del encabezado, que ya es traslúcido, y
   dos capas transparentes apiladas no se leen. */
@media (max-width: 900px) {
  .nav { background: var(--card); backdrop-filter: none; }
}

/* Los bordes de lo que se desplaza de lado se desvanecen en vez
   de cortarse con una línea: dice «sigue habiendo» sin dibujar
   nada. */
.table-wrap, .chips, .ficha-nav-pistas {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

/* =============================================================
   6 · Entradas
   -------------------------------------------------------------
   Con `@starting-style` se define desde dónde entra cada cosa y
   se anima con una transición, no con un fotograma clave. La
   diferencia importa cuando algo se interrumpe: una transición
   sale desde donde estaba; un keyframe vuelve a empezar desde el
   principio y da un tirón.

   Y nada entra desde `scale(0)`. Se arranca en .95 o .96, que es
   lo que hace que se lea como que crece y no como que aparece.
   ============================================================= */

/* --- Los avisos de arriba a la derecha --- */
.toast {
  animation: none;
  transition:
    opacity 320ms var(--sal),
    transform 320ms var(--sal),
    filter 320ms var(--sal);
}
@starting-style {
  .toast {
    opacity: 0;
    /* El desenfoque tapa la costura del cruce: sin él se ve el
       texto nítido moviéndose, con él se ve llegar. */
    filter: blur(3px);
    transform: translateY(-10px) scale(.98);
  }
}

/* --- Ventanas modales --- */
.modal { animation: none; transition: opacity var(--t-ventana) var(--sal), transform var(--t-ventana) var(--sal); }
@starting-style {
  .modal { opacity: 0; transform: scale(.96) translateY(10px); }
}
.modal-bg { transition: opacity var(--t-ventana) var(--sal); }
@starting-style { .modal-bg { opacity: 0; } }

/* --- Los <dialog> del sitio ---
   La ventana se queda centrada —esa es la excepción a lo de
   crecer desde su origen— y el fondo se oscurece para que quede
   una sola cosa que atender. */
dialog:where(.encuesta, .aviso-financiero, .modal-pago) {
  transition:
    opacity var(--t-ventana) var(--sal),
    transform var(--t-ventana) var(--sal),
    overlay var(--t-ventana) allow-discrete,
    display var(--t-ventana) allow-discrete;
}
dialog:where(.encuesta, .aviso-financiero, .modal-pago)[open] { opacity: 1; transform: none; }
@starting-style {
  dialog:where(.encuesta, .aviso-financiero, .modal-pago)[open] {
    opacity: 0; transform: scale(.96) translateY(10px);
  }
}
dialog:where(.encuesta, .aviso-financiero, .modal-pago):not([open]) {
  opacity: 0; transform: scale(.98);
}
dialog::backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--t-ventana) var(--sal), display var(--t-ventana) allow-discrete;
}

/* --- La hoja del teléfono ---
   Sube por su propia altura, con la curva de los cajones de iOS:
   arranca rápido y frena largo, que es como se para algo que
   tiene peso. */
.mm-hoja {
  animation: none;
  transition: transform var(--t-ventana) var(--cajon), opacity var(--t-pista) var(--sal);
}
.menu-movil[open] .mm-hoja { transform: translateY(0); opacity: 1; }
@starting-style {
  .menu-movil[open] .mm-hoja { transform: translateY(100%); opacity: 1; }
}

/* --- Los paneles de filtro ---
   Crecen desde su botón, no desde su centro: el desplegable sale
   de donde se apretó. Es lo único que hace que se lea como que lo
   abrió esa pastilla y no como que se apareció encima. */
.fdrop-panel {
  transform-origin: top left;
  transition: opacity var(--t-menu) var(--sal), transform var(--t-menu) var(--sal);
}
.fdrop-panel.der { transform-origin: top right; }
@starting-style {
  .fdrop-panel { opacity: 0; transform: scale(.97) translateY(-6px); }
}
.fdrop > summary .flecha { transition: transform var(--t-menu) var(--sal); }

/* =============================================================
   7 · Cascada de entrada
   -------------------------------------------------------------
   Cuando entran doce tarjetas a la vez, entran en cascada. Los
   retrasos van de 30 a 80 ms: por debajo no se percibe y por
   encima se convierte en espera. A partir de la novena todas
   comparten retraso, porque nadie va a mirar cómo entra la
   número veinte.

   `backwards` y no `forwards`: al terminar, la tarjeta vuelve a
   sus estilos normales y el hover sigue funcionando.
   ============================================================= */
@keyframes v2-entra {
  from { opacity: 0; transform: translateY(10px); }
}

.biz-grid > *, .cat-grid > *, .stat-grid > *,
.kit-rejilla > *, .redes-rejilla > *, .gallery > * {
  animation: v2-entra 320ms var(--sal) backwards;
}
.biz-grid > *:nth-child(1), .cat-grid > *:nth-child(1), .stat-grid > *:nth-child(1),
.kit-rejilla > *:nth-child(1), .redes-rejilla > *:nth-child(1), .gallery > *:nth-child(1) { animation-delay: 0ms; }
.biz-grid > *:nth-child(2), .cat-grid > *:nth-child(2), .stat-grid > *:nth-child(2),
.kit-rejilla > *:nth-child(2), .redes-rejilla > *:nth-child(2), .gallery > *:nth-child(2) { animation-delay: 40ms; }
.biz-grid > *:nth-child(3), .cat-grid > *:nth-child(3), .stat-grid > *:nth-child(3),
.kit-rejilla > *:nth-child(3), .redes-rejilla > *:nth-child(3), .gallery > *:nth-child(3) { animation-delay: 80ms; }
.biz-grid > *:nth-child(4), .cat-grid > *:nth-child(4), .stat-grid > *:nth-child(4),
.kit-rejilla > *:nth-child(4), .redes-rejilla > *:nth-child(4), .gallery > *:nth-child(4) { animation-delay: 120ms; }
.biz-grid > *:nth-child(5), .cat-grid > *:nth-child(5), .stat-grid > *:nth-child(5),
.kit-rejilla > *:nth-child(5), .redes-rejilla > *:nth-child(5), .gallery > *:nth-child(5) { animation-delay: 160ms; }
.biz-grid > *:nth-child(6), .cat-grid > *:nth-child(6), .stat-grid > *:nth-child(6),
.kit-rejilla > *:nth-child(6), .redes-rejilla > *:nth-child(6), .gallery > *:nth-child(6) { animation-delay: 200ms; }
.biz-grid > *:nth-child(7), .cat-grid > *:nth-child(7), .stat-grid > *:nth-child(7),
.kit-rejilla > *:nth-child(7), .redes-rejilla > *:nth-child(7), .gallery > *:nth-child(7) { animation-delay: 240ms; }
.biz-grid > *:nth-child(n+8), .cat-grid > *:nth-child(n+8), .stat-grid > *:nth-child(n+8),
.kit-rejilla > *:nth-child(n+8), .redes-rejilla > *:nth-child(n+8), .gallery > *:nth-child(n+8) { animation-delay: 280ms; }

/* =============================================================
   8 · Accesibilidad
   -------------------------------------------------------------
   Nada de esto es opcional. Quien pidió menos movimiento lo pidió
   por algo, y para más de uno es la diferencia entre poder usar
   el directorio y marearse.
   ============================================================= */

/* Menos movimiento: se quitan los desplazamientos y se dejan los
   cambios de opacidad y color, que son los que explican qué pasó. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }

  .btn:hover, .btn:active,
  .cat-tile:hover, .cat-tile:active,
  .biz-card:hover, .biz-card:active,
  .action-btn:hover, .chip:active, .fpill:active,
  .gallery a:hover img { transform: none !important; }

  .toast, .modal, .mm-hoja, .fdrop-panel { transform: none !important; filter: none !important; }
  .biz-grid > *, .cat-grid > *, .stat-grid > *,
  .kit-rejilla > *, .redes-rejilla > *, .gallery > * { animation: none; }
}

/* Menos transparencia: el cristal se vuelve sólido. Con la vista
   cansada, un texto sobre algo que se mueve por debajo no se lee. */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .buscador-fijo, .sticky-actions, .nav-movil {
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20, 10, 8, .78); }
}

/* Más contraste: fondos sólidos y contornos que se ven. */
@media (prefers-contrast: more) {
  .site-header, .buscador-fijo, .nav-movil { background: var(--card); backdrop-filter: none; }
  .card, .biz-card, .cat-tile, .panel, .input, .select, .textarea { border-color: var(--ink-2); }
  .btn-ghost { border-color: var(--ink-2); }
}