/* ==========================================================================
   Transporte EA — recreado a partir del diseño (diseño\*.jpg, 1312 px de ancho).
   En computadora todo se mide en "unidades de diseño" (--u): 1u = 1 px del
   diseño, escalado al ancho de la pantalla. Así la página conserva exactamente
   las proporciones del diseño en cualquier monitor. En celular (≤ 900 px) se
   reacomoda con medidas propias.
   ========================================================================== */

:root {
  --u: calc(min(100vw, 1920px) / 1312);
  --negro: #080706;
  --negro-2: #0d0c0a;
  --oro: #c9a063;
  --oro-claro: #eccf96;
  --oro-medio: #d3ae70;
  --oro-osc: #9c7338;
  --crema: #f4f1eb;
  --crema-2: #ebe5da;
  --blanco: #f5f2ec;
  --gris: #bdb6aa;
  --tinta: #1f1b16;
  --serif: "Newsreader", "Georgia", serif;
  --sans: "Figtree", system-ui, sans-serif;
  --script: "Allura", cursive;
  --linea-oro: linear-gradient(90deg, rgba(201,160,99,0) 0%, rgba(201,160,99,.55) 18%, #f1d69d 50%, rgba(201,160,99,.55) 82%, rgba(201,160,99,0) 100%);
  --boton-oro: linear-gradient(100deg, #9f7439 0%, #d9b67a 38%, #e9cd94 52%, #c49a5b 72%, #9a6f35 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(56 * var(--u)); }
body { margin: 0; background: var(--negro); color: var(--blanco); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
svg { flex: none; }
button { font: inherit; color: inherit; }

.marco { position: relative; width: calc(1312 * var(--u)); height: 100%; margin: 0 auto; }

.antetitulo {
  font-family: var(--sans); font-weight: 500; text-transform: uppercase; color: var(--oro);
  font-size: max(8.2px, calc(8.2 * var(--u))); letter-spacing: .32em;
}

/* Botones ----------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(9 * var(--u));
  height: calc(36 * var(--u)); border-radius: 999px; font-family: var(--sans); font-weight: 500;
  font-size: max(10.4px, calc(10.4 * var(--u))); cursor: pointer; border: 0; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background-color .25s ease;
}
.boton svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.boton .flecha { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-2 * var(--u)); }
.boton-oro { background: var(--boton-oro); color: #17110a; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(190,145,80,.28), inset 0 1px 0 rgba(255,240,205,.55); }
.boton-oro:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(190,145,80,.38), inset 0 1px 0 rgba(255,240,205,.55); }
.boton-linea { border: 1.3px solid rgba(245,242,236,.85); color: var(--blanco); background: rgba(8,7,6,.35); }
.boton-linea:hover { background: rgba(245,242,236,.1); transform: translateY(-2px); }

/* ============ CABECERA ============ */
.cabecera {
  position: sticky; top: 0; z-index: 50; height: calc(56 * var(--u));
  background: linear-gradient(180deg, #0b0a08, #060505);
}
.cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea-oro); box-shadow: 0 0 calc(6 * var(--u)) rgba(241,214,157,.45); }
.cab-logo { position: absolute; left: calc(132 * var(--u)); top: calc(3 * var(--u)); }
.cab-logo img { height: calc(50 * var(--u)); width: auto; }
.menu { position: absolute; left: calc(495 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; gap: calc(40 * var(--u)); }
.menu a { position: relative; font-size: max(12px, calc(12.2 * var(--u))); color: #ece8e1; padding: calc(8 * var(--u)) 0; transition: color .2s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--u)); height: 1.5px; background: var(--oro); transform: scaleX(0); transition: transform .3s ease; }
.menu a:hover, .menu a.activo { color: var(--oro-medio); }
.menu a.activo::after, .menu a:hover::after { transform: scaleX(1); }
.cab-wa {
  position: absolute; left: calc(1072 * var(--u)); top: calc(13 * var(--u)); width: calc(111 * var(--u)); height: calc(29 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); border-radius: 999px;
  background: linear-gradient(180deg, #d2ae72, #a88046); color: #17110a; font-size: max(10.2px, calc(10.2 * var(--u))); font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,236,196,.5); transition: filter .2s, transform .2s;
}
.cab-wa svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.cab-wa:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hamb { display: none; }

/* ============ HERO ============ */
.hero {
  position: relative; height: calc(296 * var(--u)); overflow: hidden;
  background: #0a0806 url(img/hero-fondo.jpg) right center / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #070605 0%, rgba(7,6,5,.97) 9%, rgba(7,6,5,.86) 24%, rgba(7,6,5,.55) 38%, rgba(7,6,5,.18) 47%, rgba(7,6,5,0) 53%),
    linear-gradient(0deg, rgba(7,6,5,.92) 0%, rgba(7,6,5,.55) 14%, rgba(7,6,5,0) 26%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea-oro); opacity: .75; }
.hero-video { display: none; }
.hero-brillo { position: absolute; left: 0; top: 0; width: calc(600 * var(--u)); height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hero-in { padding: calc(26 * var(--u)) 0 0 calc(128 * var(--u)); }
.hero .antetitulo { margin-bottom: calc(9 * var(--u)); }
.hero h1 { font-size: calc(43 * var(--u)); line-height: calc(40 * var(--u)); color: #fbf8f2; margin-bottom: calc(12 * var(--u)); }
.hero h1 span { color: var(--oro-medio); }
.hero-texto { width: calc(330 * var(--u)); font-size: max(11.6px, calc(11.6 * var(--u))); line-height: 1.43; font-weight: 400; color: #f1ede6; margin-bottom: calc(19 * var(--u)); }
.hero-botones { display: flex; gap: calc(15 * var(--u)); margin-bottom: calc(22 * var(--u)); }
.hero-botones .boton-oro { width: calc(166 * var(--u)); }
.hero-botones .boton-linea { width: calc(123 * var(--u)); }
.sellos { display: flex; align-items: center; }
.sellos li { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: max(9.6px, calc(9.6 * var(--u))); color: #ebe6de; padding-right: calc(21 * var(--u)); margin-right: calc(20 * var(--u)); border-right: 1px solid rgba(235,230,222,.28); height: calc(22 * var(--u)); }
.sellos li:last-child { margin-right: 0; }
.sellos svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--oro-medio); }

/* ============ SERVICIOS ============ */
.servicios {
  position: relative; height: calc(173 * var(--u));
  background: radial-gradient(ellipse 60% 90% at 70% 50%, #15120e 0%, #090807 70%), var(--negro);
}
.servicios::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea-oro); box-shadow: 0 0 calc(5 * var(--u)) rgba(241,214,157,.35); }
.serv-titulo { position: absolute; left: calc(128 * var(--u)); top: calc(31 * var(--u)); }
.serv-titulo .antetitulo { margin-bottom: calc(10 * var(--u)); }
.serv-titulo h2 { font-size: calc(25 * var(--u)); line-height: calc(27.5 * var(--u)); color: #f7f3ec; }
.tarjetas { position: absolute; left: calc(404 * var(--u)); top: calc(24 * var(--u)); display: grid; grid-template-columns: repeat(6, calc(127 * var(--u))); gap: calc(11 * var(--u)); }
.tarjetas article {
  position: relative; height: calc(131 * var(--u)); padding: calc(13 * var(--u)) calc(8 * var(--u)) 0; text-align: center;
  border-radius: calc(5 * var(--u)); background: linear-gradient(180deg, #13110e 0%, #0b0a08 100%);
  border: 1px solid rgba(201,160,99,.34); box-shadow: inset 0 0 calc(14 * var(--u)) rgba(201,160,99,.05);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tarjetas article:hover { border-color: rgba(236,207,150,.8); transform: translateY(-3px); box-shadow: inset 0 0 calc(16 * var(--u)) rgba(201,160,99,.1), 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.5); }
.tarjetas svg { width: calc(27 * var(--u)); height: calc(27 * var(--u)); color: var(--oro-medio); }
.tarjetas h3 { font-size: calc(11.6 * var(--u)); line-height: 1.2; color: #f4f0e9; margin: calc(9 * var(--u)) 0 calc(8 * var(--u)); letter-spacing: 0; }
.tarjetas p { font-size: max(8.1px, calc(8.1 * var(--u))); line-height: 1.58; color: #cfc8bc; font-weight: 300; }

/* ============ LA CAMIONETA ============ */
.camioneta { position: relative; height: calc(246 * var(--u)); overflow: hidden; background: #0a0908; }
.cam-fondo {
  position: absolute; top: 0; bottom: 0; left: calc(490 * var(--u)); width: calc(822 * var(--u));
  background: url(img/camioneta-fondo.jpg) center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(70 * var(--u)));
          mask-image: linear-gradient(90deg, transparent 0, #000 calc(70 * var(--u)));
}
.camioneta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(620 * var(--u)); background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(40,32,22,.35), transparent 70%); pointer-events: none; }
.camioneta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linea-oro); opacity: .8; }
.cam-texto { position: absolute; left: calc(128 * var(--u)); top: calc(11 * var(--u)); }
.cam-texto .antetitulo { font-size: max(7.8px, calc(7.8 * var(--u))); margin-bottom: calc(8 * var(--u)); }
.cam-texto h2 { font-size: calc(24.5 * var(--u)); line-height: calc(27 * var(--u)); color: #f7f3ec; margin-bottom: calc(10 * var(--u)); }
.cam-bajada { font-size: max(10.5px, calc(10.5 * var(--u))); line-height: 1.5; color: #efebe4; margin-bottom: calc(20 * var(--u)); }
.rasgos { display: grid; grid-template-columns: calc(194 * var(--u)) calc(180 * var(--u)); row-gap: calc(18 * var(--u)); }
.rasgos li { display: flex; align-items: center; gap: calc(13 * var(--u)); font-size: max(8.6px, calc(8.6 * var(--u))); line-height: 1.45; color: #e9e4dc; }
.rasgos b { display: block; font-size: max(9.4px, calc(9.4 * var(--u))); font-weight: 500; color: var(--oro-medio); text-transform: uppercase; letter-spacing: .01em; margin-bottom: calc(1 * var(--u)); }
.aro { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; border: 1.2px solid var(--oro); background: rgba(10,9,8,.5); }
.aro svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--oro-medio); }
.miniaturas { position: absolute; left: calc(1056 * var(--u)); top: calc(6 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.miniaturas button { display: block; width: calc(128 * var(--u)); height: calc(72 * var(--u)); padding: 0; border: 1.5px solid rgba(232,228,220,.9); border-radius: calc(4 * var(--u)); overflow: hidden; cursor: zoom-in; background: #000; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.5); transition: transform .25s, border-color .25s; }
.miniaturas button:hover { transform: scale(1.04); border-color: var(--oro-claro); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.visor { padding: 0; border: 1px solid var(--oro); border-radius: 8px; background: #000; max-width: min(90vw, 900px); }
.visor::backdrop { background: rgba(0,0,0,.82); }
.visor img { width: 100%; height: auto; }
.visor button { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 28px; color: #fff; cursor: pointer; }

/* ============ RESERVAS ============ */
.reservas { display: grid; grid-template-columns: calc(436 * var(--u)) calc(521 * var(--u)) 1fr; height: calc(189 * var(--u)); max-width: 1920px; margin: 0 auto; }
.res-foto { background-size: 100% 100%; background-repeat: no-repeat; }
.res-ruta { background-image: url(img/ruta.jpg); }
.res-montanas { background-image: url(img/montanas.jpg); }
.formu { position: relative; background: linear-gradient(180deg, #f7f4ee, #efebe3); color: var(--tinta); padding: calc(7 * var(--u)) calc(31 * var(--u)) 0 calc(30 * var(--u)); }
.formu h2 { font-size: calc(21.5 * var(--u)); line-height: 1.25; color: #16130f; }
.formu h2 span { color: #3b352d; }
.formu > p { font-size: max(10.2px, calc(10.2 * var(--u))); line-height: 1.4; color: #6b645a; margin: calc(1 * var(--u)) 0 calc(6 * var(--u)); }
.campos { display: grid; grid-template-columns: calc(219 * var(--u)) calc(223 * var(--u)); column-gap: calc(18 * var(--u)); row-gap: calc(6 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.campo {
  position: relative; display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(21 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(9 * var(--u)); border-radius: 999px; background: #fbfaf7;
  border: 1px solid #e3ddd2; box-shadow: 0 1px 2px rgba(60,45,20,.05); color: #3c362e; transition: border-color .2s, box-shadow .2s;
}
.campo:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201,160,99,.18); }
.campo.ancho { grid-column: 1 / -1; padding-left: calc(9 * var(--u)); }
.campo > svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); color: #3c362e; }
.campo .chev { width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: #4a443b; pointer-events: none; }
.campo input, .campo select {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0;
  font-family: var(--sans); font-size: max(9px, calc(9 * var(--u))); color: #2c2721; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.campo input { cursor: text; }
.campo input::placeholder { color: #3c362e; opacity: 1; }
.campo input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; width: calc(10 * var(--u)); }
.campo.lugar.ok { border-color: var(--oro); }
.campo.lugar.ok > svg:first-child { color: var(--oro-osc); }
.boton-form { width: 100%; height: calc(28 * var(--u)); font-size: max(9.6px, calc(9.6 * var(--u))); background: linear-gradient(100deg, #a27437 0%, #c9a063 30%, #d9bd87 50%, #c49a5b 70%, #a27437 100%); color: #1d160c; }
.sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 6px; background: #fff; border: 1px solid #e3ddd2; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.22); max-height: 280px; overflow-y: auto; cursor: default; }
.sugerencias li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.sugerencias li.activo { background: #f5eee2; }
.sugerencias svg { width: 15px; height: 15px; margin-top: 2px; color: var(--oro-osc); }
.sugerencias b { display: block; font-size: 12.5px; font-weight: 500; color: #2a2520; }
.sugerencias small { display: block; font-size: 11px; color: #8a8174; }

/* ============ POR QUÉ ELEGIRNOS ============ */
.porque { position: relative; height: calc(82 * var(--u)); background: linear-gradient(180deg, #0a0908, #070605); }
.porque h2 { position: absolute; left: calc(74 * var(--u)); top: calc(17 * var(--u)); font-size: calc(19.5 * var(--u)); color: #f6f2eb; white-space: nowrap; }
.porque ol { position: absolute; left: calc(280 * var(--u)); top: calc(18 * var(--u)); display: flex; }
.porque li { display: flex; gap: calc(18 * var(--u)); font-size: max(8.1px, calc(8.1 * var(--u))); line-height: 1.5; color: #e6e1d9; font-weight: 300; }
.porque li + li { border-left: 1px solid rgba(201,160,99,.28); padding-left: calc(15 * var(--u)); }
.porque li:nth-child(1) { width: calc(166 * var(--u)); }
.porque li:nth-child(2) { width: calc(184 * var(--u)); }
.porque li:nth-child(3) { width: calc(228 * var(--u)); }
.porque li:nth-child(4) { width: calc(193 * var(--u)); }
.porque svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: var(--oro-medio); margin-top: calc(2 * var(--u)); }
.porque em { display: block; font: 400 calc(13 * var(--u))/1 var(--serif); font-style: normal; color: var(--oro-medio); margin-bottom: calc(3 * var(--u)); }
.porque b { display: block; font-weight: 400; color: var(--oro-medio); font-size: max(8.6px, calc(8.6 * var(--u))); margin-bottom: calc(2 * var(--u)); }

/* ============ EDUARDO ============ */
.eduardo { position: relative; height: calc(101 * var(--u)); background: linear-gradient(90deg, #efebe4 0%, #f3f0ea 45%, #ece7de 100%); color: #3a342c; }
.edu-foto { position: absolute; left: calc(136 * var(--u)); top: calc(5 * var(--u)); width: calc(90 * var(--u)); height: calc(90 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(2.5 * var(--u)) solid var(--oro); box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(80,60,30,.25); }
.edu-texto { position: absolute; left: calc(286 * var(--u)); top: calc(9 * var(--u)); }
.edu-texto .antetitulo { font-size: max(6.8px, calc(6.8 * var(--u))); color: #2d2821; letter-spacing: .2em; }
.edu-texto h2 { font-size: calc(19 * var(--u)); color: #1a1712; margin: calc(1 * var(--u)) 0 calc(3 * var(--u)); }
.edu-texto p:not(.antetitulo) { font-size: max(8.7px, calc(8.7 * var(--u))); line-height: 1.43; color: #5b544a; }
.edu-texto b { font-weight: 500; color: #1a1712; }
.edu-firma { position: absolute; left: calc(918 * var(--u)); top: calc(26 * var(--u)); font-family: var(--script); color: #c09a5f; font-size: calc(24 * var(--u)); line-height: 1; transform: rotate(-17deg); transform-origin: left center; }
.edu-firma span { display: block; }
.edu-firma span + span { margin-left: calc(4 * var(--u)); padding-bottom: calc(3 * var(--u)); background: linear-gradient(90deg, transparent, #c09a5f 30%, transparent) no-repeat left bottom / 85% 1px; }

/* ============ PIE ============ */
.pie { position: relative; height: calc(57 * var(--u)); background: #070606; }
.pie::before { content: ""; position: absolute; left: 0; top: 0; width: calc(640 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(90deg, rgba(201,160,99,.2), #e6c78c 40%, rgba(201,160,99,0)); box-shadow: 0 0 calc(8 * var(--u)) rgba(230,199,140,.5); }
.pie-logo { position: absolute; left: calc(104 * var(--u)); top: calc(7 * var(--u)); height: calc(42 * var(--u)); width: auto; }
.pie-menu { position: absolute; left: calc(380 * var(--u)); top: calc(15 * var(--u)); display: flex; gap: calc(19 * var(--u)); font-size: max(7.6px, calc(7.6 * var(--u))); color: #e6e1d9; }
.pie-menu a:hover { color: var(--oro-medio); }
.pie-der { position: absolute; left: calc(900 * var(--u)); width: calc(311 * var(--u)); top: calc(6 * var(--u)); }
.redes { display: flex; justify-content: flex-end; gap: calc(16 * var(--u)); padding: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0; border-bottom: 1px solid rgba(235,230,222,.25); }
.redes a { color: #efeae2; transition: color .2s; }
.redes a:hover { color: var(--oro-medio); }
.redes svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.pie-der p { text-align: right; font-size: max(7.6px, calc(7.6 * var(--u))); color: #d8d2c8; margin-top: calc(7 * var(--u)); white-space: nowrap; }
.pie-der i { font-style: normal; margin: 0 calc(3 * var(--u)); }

.wa-flotante { position: fixed; right: max(12px, calc(12 * var(--u))); bottom: max(11px, calc(11 * var(--u))); z-index: 60; display: grid; place-items: center; width: max(38px, calc(38 * var(--u))); height: max(38px, calc(38 * var(--u))); border-radius: 50%; background: #2bb741; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.45); transition: transform .2s; }
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 58%; height: 58%; }

/* Aparición suave al hacer scroll */
@media (prefers-reduced-motion: no-preference) {
  .hero-in > * { animation: subir .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-in > :nth-child(2) { animation-delay: .08s; }
  .hero-in > :nth-child(3) { animation-delay: .16s; }
  .hero-in > :nth-child(4) { animation-delay: .24s; }
  .hero-in > :nth-child(5) { animation-delay: .32s; }
  @keyframes subir { from { opacity: 0; transform: translateY(14px); } }
}

/* ==========================================================================
   CELULAR Y TABLET
   ========================================================================== */
@media (max-width: 900px) {
  :root, html[style] { --u: 1px !important; }
  html { scroll-padding-top: 64px; }
  .marco { width: auto; padding: 0 22px; }

  .cabecera { height: 64px; }
  .cab-logo { left: 14px; top: 7px; }
  .cab-logo img { height: 50px; }
  .cab-wa { left: auto; right: 64px; top: 17px; width: auto; padding: 0 14px; height: 30px; font-size: 12px; }
  .hamb { display: block; position: absolute; right: 14px; top: 14px; width: 40px; height: 36px; background: none; border: 0; cursor: pointer; }
  .hamb span { display: block; height: 1.5px; margin: 6px 8px; background: var(--oro-medio); transition: transform .3s, opacity .3s; }
  .menu-abierto .hamb span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-abierto .hamb span:nth-child(2) { opacity: 0; }
  .menu-abierto .hamb span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .menu { position: fixed; left: 0; right: 0; top: 64px; height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 18px; background: rgba(8,7,6,.98); border-bottom: 1px solid rgba(201,160,99,.5); transform: translateY(-120%); visibility: hidden; transition: transform .35s ease, visibility 0s .35s; z-index: -1; }
  .menu-abierto .menu { transform: none; visibility: visible; transition: transform .35s ease; }
  .menu a { font-size: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .menu a::after { display: none; }

  .hero { height: auto; min-height: calc(100svh - 64px); display: flex; align-items: flex-end; background-position: 72% center; }
  .hero-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero::before { background: linear-gradient(0deg, #070605 0%, rgba(7,6,5,.92) 38%, rgba(7,6,5,.35) 65%, rgba(7,6,5,.15) 100%); z-index: 1; }
  .hero-brillo { display: none; }
  .hero-in { position: relative; z-index: 2; padding: 0 22px 34px; }
  .hero .antetitulo { font-size: 10px; margin-bottom: 12px; }
  .hero h1 { font-size: 46px; line-height: 1; margin-bottom: 16px; }
  .hero-texto { width: auto; font-size: 15px; margin-bottom: 24px; }
  .hero-botones { flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
  .boton { height: 48px; font-size: 14px; gap: 10px; }
  .boton svg { width: 18px; height: 18px; }
  .boton .flecha { width: 15px; height: 15px; }
  .hero-botones .boton-oro, .hero-botones .boton-linea { width: auto; flex: 1 1 180px; }
  .sellos { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sellos li { border: 0; padding: 0; margin: 0; height: auto; font-size: 13px; gap: 10px; }
  .sellos svg { width: 20px; height: 20px; }

  .servicios, .camioneta, .reservas, .porque, .eduardo, .pie { height: auto; }
  .antetitulo { font-size: 10px; }
  .servicios { padding: 52px 0; }
  .serv-titulo, .tarjetas, .cam-texto, .miniaturas, .porque h2, .porque ol, .edu-foto, .edu-texto, .edu-firma, .pie-logo, .pie-menu, .pie-der { position: static; }
  .serv-titulo { margin-bottom: 26px; }
  .serv-titulo h2 { font-size: 32px; line-height: 1.12; }
  .tarjetas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tarjetas article { height: auto; padding: 20px 12px 20px; }
  .tarjetas svg { width: 32px; height: 32px; }
  .tarjetas h3 { font-size: 16px; margin: 12px 0 8px; }
  .tarjetas p { font-size: 12.5px; }

  .camioneta { padding: 0 0 40px; }
  .cam-fondo { position: relative; left: 0; width: 100%; height: 0; padding-bottom: 43.6%; background-size: 146.8% 100%; background-position: 0 0; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%); mask-image: linear-gradient(0deg, transparent 0, #000 22%); }
  .cam-texto { padding-top: 4px; }
  .cam-texto .antetitulo { font-size: 10px; margin-bottom: 10px; }
  .cam-texto h2 { font-size: 32px; line-height: 1.12; margin-bottom: 12px; }
  .cam-bajada { font-size: 14.5px; margin-bottom: 26px; }
  .cam-bajada br { display: none; }
  .rasgos { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .rasgos li { font-size: 12.5px; gap: 12px; align-items: flex-start; }
  .rasgos b { font-size: 12.5px; }
  .aro { width: 42px; height: 42px; }
  .aro svg { width: 22px; height: 22px; }
  .miniaturas { grid-template-columns: repeat(3, 1fr); margin-top: 28px; gap: 10px; }
  .miniaturas button { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 6px; }

  .reservas { grid-template-columns: 1fr; }
  .res-ruta { display: none; }
  .res-montanas { height: 0; padding-bottom: 53%; background-size: cover; background-position: right center; }
  .formu { padding: 36px 22px 32px; }
  .formu h2 { font-size: 30px; }
  .formu > p { font-size: 14px; margin: 6px 0 20px; }
  .formu > p br { display: none; }
  .campos { grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
  .campo { height: 48px; padding: 0 14px 0 16px; gap: 10px; }
  .campo.ancho { padding-left: 16px; }
  .campo > svg { width: 17px; height: 17px; }
  .campo .chev { width: 15px; height: 15px; }
  .campo input, .campo select { font-size: 16px; }
  .boton-form { height: 50px; font-size: 15px; }

  .porque { padding: 46px 0; }
  .porque h2 { font-size: 30px; margin: 0 0 26px 22px; }
  .porque ol { flex-direction: column; gap: 22px; padding: 0 22px; }
  .porque li, .porque li:nth-child(n) { width: auto; font-size: 13px; gap: 16px; }
  .porque li + li { border: 0; padding: 0; }
  .porque svg { width: 34px; height: 34px; }
  .porque em { font-size: 18px; }
  .porque b { font-size: 14px; }

  .eduardo { padding: 40px 0; }
  .edu-in { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
  .edu-foto { width: 96px; height: 96px; border-width: 2.5px; }
  .edu-texto .antetitulo { font-size: 10px; }
  .edu-texto h2 { font-size: 26px; margin: 4px 0 0; }
  .edu-texto p:not(.antetitulo) { grid-column: 1 / -1; font-size: 14px; margin-top: 14px; }
  .edu-texto { display: contents; }
  .edu-texto .antetitulo, .edu-texto h2 { grid-column: 2; }
  .edu-texto .antetitulo { align-self: end; }
  .edu-in > .edu-foto { grid-row: 1 / span 2; }
  .edu-texto p br { display: none; }
  .edu-firma { grid-column: 1 / -1; justify-self: center; font-size: 34px; margin-top: 22px; transform: rotate(-8deg); transform-origin: center; }

  .pie { padding: 30px 0 90px; }
  .pie::before { width: 100%; }
  .pie-in { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
  .pie-logo { height: 52px; }
  .pie-menu { flex-wrap: wrap; justify-content: center; gap: 10px 18px; font-size: 13px; }
  .pie-der { width: 100%; }
  .redes { justify-content: center; gap: 22px; padding: 0 0 14px; }
  .redes svg { width: 22px; height: 22px; }
  .pie-der p { text-align: center; white-space: normal; font-size: 12px; line-height: 1.7; }
  .wa-flotante { width: 56px; height: 56px; right: 16px; bottom: 16px; }
}

@media (max-width: 520px) {
  .cab-wa { display: none; }
  .hero h1 { font-size: 42px; }
  .rasgos { grid-template-columns: 1fr; }
}

/* El logo trae fondo negro: se funde con la cabecera y el pie */
.cab-logo img, .pie-logo { mix-blend-mode: lighten; }
.hero h1, .serv-titulo h2, .cam-texto h2 { font-weight: 500; }

/* ---- Sin altos fijos: las secciones crecen si el texto ocupa más renglones ---- */
@media (min-width: 901px) {
  .hero { height: auto; min-height: calc(296 * var(--u)); padding-bottom: calc(20 * var(--u)); }
  .hero-texto { width: calc(350 * var(--u)); }
  .servicios { height: auto; min-height: calc(173 * var(--u)); }
  .tarjetas { position: relative; left: auto; top: auto; margin-left: calc(404 * var(--u)); padding: calc(24 * var(--u)) 0 calc(20 * var(--u)); grid-auto-rows: 1fr; }
  .tarjetas article { height: auto; min-height: calc(131 * var(--u)); padding-bottom: calc(12 * var(--u)); }
  .camioneta { height: auto; min-height: calc(246 * var(--u)); }
  .cam-texto { position: relative; left: auto; top: auto; padding: calc(11 * var(--u)) 0 calc(18 * var(--u)) calc(128 * var(--u)); }
  .rasgos { grid-template-columns: calc(200 * var(--u)) calc(200 * var(--u)); }
  .porque { height: auto; min-height: calc(82 * var(--u)); }
  .porque ol { position: relative; left: auto; top: auto; margin-left: calc(280 * var(--u)); padding: calc(18 * var(--u)) 0 calc(14 * var(--u)); }
  .eduardo { height: auto; min-height: calc(101 * var(--u)); }
  .edu-texto { position: relative; left: auto; top: auto; margin-left: calc(286 * var(--u)); padding: calc(9 * var(--u)) 0 calc(10 * var(--u)); }
}
html, body { overflow-x: clip; }

/* ---- Video del hero: completo, sin recortes ---- */
.hero-medio { display: none; }
@media (min-width: 901px) {
  .hero { min-height: max(calc(296 * var(--u)), 520px); background-image: none; }
  .hero-medio { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 58%; overflow: hidden; background: #000; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .hero-video-fondo { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.1); }
  .hero-video { display: block; position: relative; height: 100%; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .hero::before { z-index: 1; background:
    linear-gradient(90deg, #070605 0%, rgba(7,6,5,.97) 34%, rgba(7,6,5,0) 48%),
    linear-gradient(0deg, rgba(7,6,5,.7) 0%, rgba(7,6,5,0) 14%); }
  .hero-brillo { z-index: 2; }
  .hero-in { position: relative; z-index: 2; }
  .reservas { height: auto; min-height: calc(189 * var(--u)); }
  .formu { padding-bottom: calc(12 * var(--u)); }
}
@media (max-width: 900px) {
  .hero-medio { display: block; position: absolute; inset: 0; }
  .hero-video-fondo { display: none; }
}

/* ---- Hero en computadora: el texto crece en proporción al video y queda centrado ---- */
@media (min-width: 901px) {
  .hero { --escala: 1.4; display: flex; align-items: center; min-height: max(calc(296 * 1.75 * var(--u)), 520px); }
  .hero-in { zoom: var(--escala); width: calc(1312 * var(--u) / var(--escala)); height: auto; padding: calc(10 * var(--u)) 0 calc(14 * var(--u)) calc(128 * var(--u) / var(--escala)); }
}

/* ---- Logo nuevo (PNG sin fondo) ---- */
.cab-logo img, .pie-logo { mix-blend-mode: normal; }
.cab-logo { top: calc(2 * var(--u)); }
.cab-logo img { height: calc(52 * var(--u)); }
.pie-logo { top: calc(6 * var(--u)); height: calc(44 * var(--u)); }

/* ---- Sellos del hero: los dos primeros arriba, "Atención previa reserva" abajo ---- */
@media (min-width: 901px) {
  .sellos { display: grid; grid-template-columns: auto auto; justify-content: start; row-gap: calc(8 * var(--u)); }
  .sellos li:nth-child(2) { border-right: 0; margin-right: 0; padding-right: 0; }
  .sellos li:nth-child(3) { grid-column: 1 / -1; border-right: 0; }
  .hero-in { padding-top: calc(22 * var(--u)); padding-bottom: calc(22 * var(--u)); }
}
@media (max-width: 900px) {
  .cab-logo img { height: 48px; }
  .pie-logo { height: 58px; }
}

/* ---- Frase "Tu confianza..." centrada en el alto de la sección de Eduardo ---- */
@media (min-width: 901px) {
  .edu-firma { top: 50%; transform: translateY(-50%) rotate(-17deg); transform-origin: center; }
}

/* ---- Correo en el pie ---- */
.redes { align-items: center; }
.redes .correo { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-right: auto; font-size: max(8px, calc(8 * var(--u))); }
@media (max-width: 900px) {
  .redes { flex-wrap: wrap; }
  .redes .correo { flex-basis: 100%; justify-content: center; margin: 0 0 6px; font-size: 14px; gap: 8px; }
}

/* ---- Pie con el logo 2 (emblema EA) ---- */
@media (min-width: 901px) {
  .pie { height: calc(104 * var(--u)); }
  .pie-logo { top: calc(10 * var(--u)); left: calc(128 * var(--u)); height: calc(84 * var(--u)); }
  .pie-menu { top: calc(47 * var(--u)); }
  .pie-der { top: calc(33 * var(--u)); }
}
@media (max-width: 900px) {
  .pie-logo { height: 130px; }
}

/* ==========================================================================
   DORADO ÚNICO — medido del logo (logo\logo.jpg y logo 2.jpg)
   oscuro #A4783B · medio #D9AE62 · brillante #E8C47C · reflejo #F6DCA3
   ========================================================================== */
:root {
  --oro: #D9AE62;
  --oro-medio: #E8C47C;
  --oro-claro: #F6DCA3;
  --oro-osc: #A4783B;
  --oro-metal: linear-gradient(180deg, #FBE6B4 0%, #EDCB86 32%, #D9AE62 60%, #B8883F 85%, #A4783B 100%);
  --boton-oro: linear-gradient(180deg, #F6DCA3 0%, #E8C47C 30%, #D9AE62 58%, #B8883F 88%, #A4783B 100%);
  --linea-oro: linear-gradient(90deg, rgba(217,174,98,0) 0%, rgba(217,174,98,.6) 18%, #F6DCA3 50%, rgba(217,174,98,.6) 82%, rgba(217,174,98,0) 100%);
}
/* Botones dorados: todos con el mismo metal del logo */
.boton-oro, .cab-wa, .boton-form { background: var(--boton-oro); color: #1a1208; box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(217,174,98,.28), inset 0 1px 0 rgba(255,244,214,.7); }
.boton-oro:hover, .cab-wa:hover, .boton-form:hover { box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(217,174,98,.4), inset 0 1px 0 rgba(255,244,214,.7); }
/* Textos dorados grandes: brillo metálico como las letras del logo */
.hero h1 span, .porque em {
  background: var(--oro-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Textos dorados chicos e íconos: el tono brillante del logo, parejo */
.antetitulo, .menu a:hover, .menu a.activo, .sellos svg, .tarjetas svg, .aro svg, .rasgos b, .porque svg, .porque b, .redes a:hover, .pie-menu a:hover { color: var(--oro-medio); }
.aro, .edu-foto { border-color: var(--oro); }
.menu a::after { background: var(--oro-medio); }
.tarjetas article { border-color: rgba(217,174,98,.38); }
.porque li + li { border-left-color: rgba(217,174,98,.3); }
.campo:focus-within { box-shadow: 0 0 0 3px rgba(217,174,98,.22); }
.pie::before { background: linear-gradient(90deg, rgba(217,174,98,.2), #F6DCA3 40%, rgba(217,174,98,0)); }
/* Sobre fondo claro (Eduardo) se usa el dorado oscuro del logo para que se lea */
.edu-firma { color: var(--oro-osc); }
.edu-firma span + span { background-image: linear-gradient(90deg, transparent, var(--oro) 30%, transparent); }
.campo.lugar.ok { border-color: var(--oro); }
.pie-der p { white-space: normal; line-height: 1.5; }

/* ---- Dorado más visible: textos más gruesos y botones más brillantes ---- */
:root {
  --oro-texto: #EFCD88;
  --boton-oro: linear-gradient(180deg, #FCE7B6 0%, #F2D291 35%, #E6BF75 70%, #D2A55A 100%);
  --oro-metal: linear-gradient(180deg, #FCE7B6 0%, #F2D291 40%, #E2B96C 75%, #C99A52 100%);
}
.boton-oro, .cab-wa, .boton-form { background: var(--boton-oro); color: #1a1208; font-weight: 600; }
.porque b, .rasgos b { color: var(--oro-texto); font-weight: 600; }
.porque em { font-weight: 500; }
.antetitulo { color: var(--oro-texto); font-weight: 600; }
.menu a:hover, .menu a.activo { color: var(--oro-texto); }
.sellos svg, .tarjetas svg, .aro svg, .porque svg { color: var(--oro-texto); stroke-width: 1.5; }
.hero h1 span { font-weight: 500; }