/* ==========================================================================
   El Rancho Interiorano — base: tokens de marca, reset y tipografia
   --------------------------------------------------------------------------
   PALETA: los hex NO son inventados. Salen de medir con cuentagotas sobre el
   material real del estudio (The Raw Studio):
     - "Recurso 1LOGO RANCHO.png"      -> el script del logo mide #F1CBA5 exacto
     - "Identidad Visual Final.png"    -> fondo texturado #1C1613 / #211915,
       arte ladrillo #9E3E2C, arte ocre #AB5722, arte de tambores #CB5F07,
       poster del diablico #C3750E, circulos de bordado en crema #F7CFAB.
   Los valores provisionales del brief (#2A1610, #9C4A2A, #7E2D1E, #E85C25,
   #D9A13B, #E8B589) quedan sustituidos por estos, que son los reales.
   --------------------------------------------------------------------------
   TIPOGRAFIA, tres voces con jerarquia estricta:
     1. Logo script  -> SIEMPRE la imagen del logo real, nunca una fuente.
     2. Permanent Marker -> titulares de impacto y frases cortas. Auto-hospedada
        (v1.001, Apache 2.0, fsType 0: se puede servir en web sin problema).
     3. Geometrica sans -> cuerpo, UI, precios, navegacion.
        DINOT es la fuente oficial, pero el archivo "Dinot Font.otf" es una
        licencia de escritorio de FSI FontShop; su EULA exige una licencia de
        Webfont aparte que este proyecto no tiene. Se usa BARLOW (Google Fonts),
        que es el fallback aprobado explicitamente en el brief.
   ========================================================================== */

@font-face {
  font-family: 'Permanent Marker';
  src: url('../public/fonts/PermanentMarker-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- superficies --- */
  --ox:            #1C1613;   /* fondo principal, oxido profundo */
  --ox-2:          #211915;   /* fondo alterno sutil */
  --tarjeta:       #2A2019;   /* tarjetas sobre el fondo */
  --ladrillo:      #9E3E2C;   /* superficies calidas, citas */
  --ladrillo-osc:  #7E2F22;
  --terracota:     #AB5722;   /* decorativo / display */
  --terracota-osc: #8F4318;   /* mismo tono, apto para texto encima (5.7:1) */

  /* --- acentos --- */
  --naranja:       #CB5F07;   /* linea, graficos, bordes (no texto chico) */
  --brasa:         #F0822A;   /* accion: botones, precios, enlaces */
  --mostaza:       #C3750E;
  --dorado:        #D19D66;   /* varillas del techo, detalles ceremoniales */
  --verde:         #2E5339;

  /* --- tinta --- */
  --durazno:       #F1CBA5;   /* EXCLUSIVO del logo */
  --hueso:         #F7CFAB;
  --crema:         #F3E6D6;   /* texto principal sobre oscuro (14.6:1) */
  --crema-mute:    #C9B49C;   /* texto secundario sobre oscuro (8.9:1) */
  --negro:         #120D0B;

  /* --- tipografia --- */
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --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;            /* publico mayor: nunca por debajo de 17px */
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  /* textura tejida del fondo, insinuada como en los artes del estudio */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(171, 87, 34, .10), transparent 45%),
    radial-gradient(circle at 84% 78%, rgba(158, 62, 44, .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;
  /* nunca por debajo de 20px, nunca en parrafos */
  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);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  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;            /* objetivo tactil grande */
  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(--ox);            /* 6.8:1 */
}
.boton--brasa:hover { background: var(--hueso); color: var(--ox); }

.boton--borde {
  border: 2px solid var(--dorado);
  color: var(--dorado);        /* 7.4:1 sobre oxido */
  background: rgba(28, 22, 19, .35);
}
.boton--borde:hover { border-color: var(--hueso); color: var(--hueso); }

/* ------------------------------------------------ pastilla "abierto ahora" --- */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(209, 157, 102, .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 ======================
   Se apaga TODO: intro, revelados, transiciones y el video del hero. */
@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; }
  .intro { display: none !important; }
  .hero__video { display: none !important; }
  .celda--viva video { display: none; }
}