/* ==========================================================================
   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 */
  --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 --- */
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans-cond: 'Barlow Condensed', var(--sans);   /* voz de "cartel de feria" (brief Fable sec.2) */
  --marker: 'Permanent Marker', 'Barlow', system-ui, cursive;

  /* --- 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);
}

/* --------------------------------------------------------------- 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; } }

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);
}

.titulo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.65rem, 4.4vw, 2.75rem);
  letter-spacing: -.015em;
  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);
}
/* 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); }
.boton--brasa:active { background: var(--hueso); color: var(--negro); }

.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; }
.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; }
}