/* ==========================================================================
   El Rancho Interiorano — sede El Roble, Aguadulce — base: tokens, reset, tipografia
   --------------------------------------------------------------------------
   PALETA: BORRADOR (30-ago-2026). No hay logo real todavia para esta sede, asi
   que estos hex salen de muestrear con Python/Pillow los colores dominantes de
   3 fotos reales del lugar (ver CLAUDE.md, seccion "Brief de diseno"), no de un
   cuentagotas sobre el logo como se hizo en la sede Capira. Recalibrar en
   cuanto llegue el logo real.
   --------------------------------------------------------------------------
   Mismos nombres de variable y misma convencion de clases que
   RanchoInteriorano/css/base.css (sede Capira) a proposito, para que ambos
   sitios sean faciles de mantener en paralelo — los VALORES son distintos:
   esta sede es mas oscura/nocturna (ambiente de parranda), Capira es mas clara
   y de dia.
   --------------------------------------------------------------------------
   TIPOGRAFIA: no hay archivos de fuente propios en el material recibido para
   esta sede (a diferencia de Capira, que trajo Dinot/Permanent Marker del
   estudio). Se usa Google Fonts por CDN: Barlow (cuerpo/UI, misma familia que
   Capira para que ambos sitios "se sientan familia") y Permanent Marker
   (titulares de impacto).
   ========================================================================== */

:root {
  /* ═══ PALETA RECALIBRADA CON EL LOGO REAL (30-ago-2026) ═══
     El logo llegó del dueño (archivo con fondo blanco, se le quitó el fondo
     para uso web). Se muestrearon los pixeles reales del logo con Python/
     Pillow — mismo proceso que se usó en la sede Capira, esta vez con el
     logo de verdad en vez de solo fotos del ambiente:
       - script "Rancho" / "Comida Típica Panameña" / "Aguadulce, El Roble" -> #D36602
       - script "Interiorano" / línea del tejado                            -> #602E0C
       - techo de paja del ranchito del logo                                -> #F0B040
     --brasa y --dorado se actualizan a estos valores reales (antes eran
     calibrados sobre fotos del ambiente, no sobre el logo). --pared/--teja/
     --terracota-piso SIGUEN siendo de las fotos reales del local — son
     materiales del lugar, no del logo, y se quedan como estaban. */

  /* --- superficies --- */
  --ox:            #2A1A12;   /* fondo principal, madera oscura/nocturna */
  --ox-2:          #301D14;   /* fondo alterno sutil */
  --tarjeta:       #3A2418;   /* tarjetas sobre el fondo */
  --ladrillo:      #603018;   /* superficies calidas, citas */
  --ladrillo-osc:  #4C2612;
  --terracota:     #784830;   /* decorativo / display */
  --terracota-osc: #5F3824;   /* mismo tono, apto para texto encima */

  /* --- acentos --- */
  --naranja:       #C9701F;   /* linea, graficos, bordes (no texto chico) */
  --brasa:         #D36602;   /* accion: botones, precios, enlaces — naranja REAL del logo */
  --fiesta:        #C13B2C;   /* acento de parranda — rojo real de lata Balboa/etiqueta Seco (brief Fable, sec.1) */
  --dorado:        #F0B040;   /* detalles, ornamentos — dorado REAL del techo de paja del logo */
  --brasa-texto:   #DB7419;   /* Ronda 27: brasa un punto más clara SOLO para texto chico sobre --ox-2 (contraste 4.96:1; --brasa daba 4.32 en los precios) */
  --verde:         #3F5C3A;   /* verde de apoyo, entorno campestre */
  --logo-marron:   #602E0C;   /* EXCLUSIVO del logo (script "Interiorano", tejado) — no usar en superficies grandes */

  /* --- de fotos reales del local (brief Fable 5 v1, 30-ago-2026), distintas
     del logo — son materiales del lugar, no la marca. Ver BRIEF-DISENO-FABLE.md sec.1 --- */
  --pared:          #B75B33;  /* naranja quemado de la pared de cocina/barra — display, NO texto chico */
  --teja:           #8A4A2E;  /* teja del alero / zinc del techo — bordes, cenefa */
  --terracota-piso: #9C5F45;  /* baldosa en rombos del piso — decorativo, chips, fondos sutiles */

  /* --- tinta --- */
  --hueso:         #F6E4C8;
  --crema:         #F3E6D6;   /* texto principal sobre oscuro */
  --crema-mute:    #C9AF95;   /* texto secundario sobre oscuro */
  --negro:         #17100B;

  /* --- tipografia --- */
  /* Ronda 29: cada pila lleva su cara de respaldo con métricas (ver @font-face
     de abajo) para que el texto no salte cuando llega la fuente real. */
  --sans: 'Barlow', 'Barlow Respaldo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans-cond: 'Barlow Condensed', 'Barlow Condensed Respaldo', 'Barlow Condensed Respaldo 2', var(--sans);   /* voz de "cartel de feria" (brief Fable sec.2) */
  --marker: 'Permanent Marker', 'Marker Respaldo', 'Barlow', system-ui, cursive;
  --display: 'Alfa Slab One', 'Alfa Slab Respaldo', 'Rockwell', 'Roboto Slab', Georgia, serif;   /* titulares (Ronda 26): slab de cartel */

  /* --- ritmo --- */
  --ancho: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --seccion-y: clamp(3.5rem, 9vw, 7rem);
  --radio: 4px;

  /* --- movimiento (todo <= 600ms) --- */
  --t-rapido: 180ms;
  --t-medio: 320ms;
  --t-lento: 560ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------ fuentes de respaldo con métricas ---
   Ronda 29 (27-oct-2026): el CLS de escritorio (0.145) venía de que el hero y
   los titulares se reacomodaban cuando llegaban Barlow / Alfa Slab One desde
   Google Fonts. Estas caras "fantasma" apuntan a fuentes locales del sistema
   con size-adjust para que el texto ocupe casi el mismo ancho antes y después
   del intercambio. Si la fuente local no existe, el navegador salta a la
   siguiente de la pila sin error. */
@font-face {
  font-family: 'Barlow Respaldo';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans');
  size-adjust: 94%;   /* calibrado midiendo en Chrome: Barlow 1662 px vs Arial 1774 px (misma frase, 40 px) */
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Respaldo';
  src: local('Arial Narrow'), local('Roboto Condensed'), local('Liberation Sans Narrow');
  size-adjust: 87%;   /* Barlow Condensed 626 px vs Arial Narrow 716 px */
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Respaldo 2';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 72%;   /* si no hay Arial Narrow: Arial reducida al ancho de la condensada */
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Alfa Slab Respaldo';
  src: local('Rockwell Extra Bold'), local('Rockwell'), local('Georgia');
  size-adjust: 90%;   /* Alfa Slab One 601 px vs Rockwell Extra Bold 664 px */
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Marker Respaldo';
  src: local('Segoe Print'), local('Comic Sans MS'), local('Chalkboard SE');
  size-adjust: 97%;   /* Permanent Marker 692 px vs Segoe Print 710 px */
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--ox);
  color: var(--crema);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(232, 163, 61, .08), transparent 45%),
    radial-gradient(circle at 84% 78%, rgba(178, 58, 46, .10), transparent 42%);
  background-attachment: fixed;
}

@media (min-width: 900px) { body { font-size: 18px; } }
/* Ronda 29 (27-oct-2026): el fondo de la página cambia de tono según la
   sección que está a la vista (js/vivo.js escribe --fondo-pagina); la
   transición es larga a propósito, como si cambiara la luz del rancho. */
body { background-color: var(--fondo-pagina, var(--ox)); transition: background-color 1.1s var(--ease); }
/* Ronda 29: grano fino de papel/madera sobre toda la página (SVG de ruido en
   línea, sin archivo extra). Solo en pantallas grandes: en celular una capa
   fija a pantalla completa cuesta repintados y casi no se aprecia. */
@media (min-width: 900px) {
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: 1000;
    pointer-events: none;
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
  }
}
/* Ronda 27: el fondo fijo obliga a repintar los degradados en cada scroll en
   Android; en celular va normal (iOS ya lo ignoraba). */
@media (max-width: 899px) { body { background-attachment: scroll; } }

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

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.12; font-weight: 700; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brasa); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--hueso); }

ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------- voces tipograficas --- */
.marker {
  font-family: var(--marker);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .005em;
  font-size: clamp(1.6rem, 5.5vw, 3.6rem);
}

/* Ronda 26 (14-sep-2026): los h2 pasan de Barlow 700 a Alfa Slab One (un solo
   peso, 400). Es más ancha, así que el tamaño máximo baja de 2.75 a 2.5rem. */
.titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: .01em;
  line-height: 1.12;
  color: var(--crema);
}

.kicker {
  font-family: var(--sans-cond);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 .85em;
}

/* ------------------------------------------------------------ utilidades --- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar-al-contenido {
  position: absolute;
  left: .75rem; top: -4rem;
  z-index: 999;
  background: var(--brasa);
  color: var(--ox);
  font-weight: 600;
  padding: .7rem 1.1rem;
  border-radius: var(--radio);
  transition: top var(--t-rapido) var(--ease);
}
.saltar-al-contenido:focus { top: .75rem; }

/* --------------------------------------------------------------- botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .8rem 1.5rem;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform var(--t-rapido) var(--ease),
              background-color var(--t-rapido) var(--ease),
              border-color var(--t-rapido) var(--ease),
              color var(--t-rapido) var(--ease);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--brasa {
  background: var(--brasa);
  color: var(--negro);
  /* Ronda 29: el botón "con brasa" — sombra cálida de base y, al pasar el
     mouse, un rescoldo que sigue al cursor (js/vivo.js escribe --mx/--my). */
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 8px 22px -8px rgba(211, 102, 2, .6);
  transition: transform var(--t-rapido) var(--ease),
              background-color var(--t-rapido) var(--ease),
              box-shadow var(--t-medio) var(--ease),
              color var(--t-rapido) var(--ease);
}
.boton--brasa::before {
  content: ""; position: absolute; inset: -60%; z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 226, 160, .95), rgba(255, 190, 90, .45) 18%, transparent 40%);
  opacity: 0; transition: opacity var(--t-medio) var(--ease);
  pointer-events: none;
}
/* hover a brasa+10% luz en vez de saltar directo a --hueso (brief Fable
   sec.7 punto 12: el salto naranja→casi blanco era brusco) */
.boton--brasa:hover { background: #F2B95C; color: var(--negro); box-shadow: 0 14px 34px -10px rgba(240, 176, 64, .85), inset 0 0 0 1px rgba(255, 230, 170, .45); }
.boton--brasa:hover::before, .boton--brasa:focus-visible::before { opacity: 1; }
.boton--brasa:active { background: var(--hueso); color: var(--negro); }
/* el botón principal del hero respira como una brasa viva */
@media (prefers-reduced-motion: no-preference) {
  .hero__acciones .boton--brasa { animation: brasaRespira 3.4s ease-in-out infinite; }
}
@keyframes brasaRespira {
  0%, 100% { box-shadow: 0 8px 22px -8px rgba(211, 102, 2, .6); }
  50%      { box-shadow: 0 10px 34px -6px rgba(240, 176, 64, .95); }
}
/* Ronda 29: icono de teléfono propio (SVG), reemplaza el ☎ de sistema que se
   veía distinto en cada celular */
.ico-tel { width: 1.1em; height: 1.1em; flex: none; }

.boton--borde {
  border: 2px solid var(--dorado);
  color: var(--dorado);
  background: rgba(23, 16, 11, .35);
}
.boton--borde:hover { border-color: var(--hueso); color: var(--hueso); }

/* Ronda 16: botón de WhatsApp, mismo criterio que Capira */
.boton--wa {
  border: 2px solid #25D366;
  color: #25D366;
  background: rgba(23, 16, 11, .35);
}
.boton--wa:hover {
  background: #25D366;
  color: var(--ox);
}

/* Ronda 15: botón de Instagram, mismo criterio que Capira */
.boton--ig {
  border: 2px solid var(--dorado);
  color: var(--dorado);
  background: rgba(23, 16, 11, .35);
}
.boton--ig:hover { border-color: var(--hueso); color: var(--hueso); }
.boton--ig .ico-ig { color: #E1306C; }
.boton--ig:hover .ico-ig { color: #F06292; }

/* ------------------------------------------------ pastilla "abierto ahora" ---
   Ronda 10: horario real confirmado por el dueño para esta sede (mismo que
   Capira). Misma clase ya verificada en RanchoInteriorano/css/base.css. --- */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(240, 176, 64, .45);
  border-radius: 999px;
  font-size: .95rem;
  color: var(--crema);
  background: rgba(18, 13, 11, .5);
}
.pastilla::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--crema-mute);
  flex: none;
}
.pastilla--abierto::before { background: #6FBF73; animation: pastillaLatido 2.4s ease-in-out infinite; }
@keyframes pastillaLatido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 191, 115, .55); }
  60% { box-shadow: 0 0 0 6px rgba(111, 191, 115, 0); }
}
@media (prefers-reduced-motion: reduce) { .pastilla--abierto::before { animation: none; } }
.pastilla--cerrado::before { background: var(--brasa); }
.pastilla--grande { font-size: 1rem; padding: .55rem 1.1rem; }

/* ------------------------------------------------ revelado al hacer scroll --- */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-lento) var(--ease),
              transform var(--t-lento) var(--ease);
}
.revelar.visible { opacity: 1; transform: none; }

/* ============================ prefers-reduced-motion ====================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
  .hero__video { display: none !important; }
}