/* ponytail: CSS de las páginas de rubro (agro, almacenes, distribucion, ferreteria, botica, gym). Extraído de agro.html; lo que cambia por página es solo la copia y las fotos. */
/* hero: texto a la izquierda; la foto sangra por el borde derecho y arriba (sin tarjeta), fundida al navy por la izquierda. Ref: evpin.com */
.rhero { background:radial-gradient(80% 90% at 0% 30%, #434570 0%, #2A2B48 35%, var(--navy) 70%, #15162A 100%); position:relative; overflow:hidden; padding:calc(64px + 9vh) 0 0 }
.rhero .wrap { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:end }
.rhero h1 { font-size:clamp(38px,5.4vw,84px) }
.rhero h1 em { font-style:normal; color:var(--coral-light) }
.rhero .sub { margin:22px 0 0; max-width:48ch; color:rgba(255,255,255,.75); font-size:16px }
.rhero .ctas { display:flex; align-items:center; gap:28px; margin:34px 0 60px; flex-wrap:wrap }
.rhero .ctas .more { font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:4px }
.rhero .ctas .more:hover { color:#fff; border-color:var(--coral) }
.rhero .ctas .links { display:flex; flex-direction:column; align-items:flex-start; gap:16px } /* dos enlaces (demo + ancla) apilados junto al círculo */
.rhero .photo { position:absolute; top:0; right:0; bottom:0; width:min(56vw,900px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 55%), linear-gradient(transparent 0, #000 42%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 55%), linear-gradient(transparent 0, #000 42%); mask-composite:intersect }
.rhero .photo img { width:100%; height:100%; object-fit:cover; object-position:center 30% }
.rhero .photo figcaption { position:absolute; right:24px; bottom:80px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5) }
.rhero .known { position:relative; display:flex; gap:32px; justify-content:center; align-items:center; padding:18px 24px; background:var(--navy2); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); flex-wrap:wrap }
.rhero .known b { color:#fff; font-weight:600 }
@media (max-width:900px){
  .rhero .wrap { grid-template-columns:1fr }
  .rhero .photo { position:relative; width:auto; margin:0 -24px; aspect-ratio:16/10; -webkit-mask-image:linear-gradient(transparent 0, #000 30%); mask-image:linear-gradient(transparent 0, #000 30%) }
  .rhero .ctas { margin-bottom:40px }
  .rhero .ctas .more { padding-top:14px }
  .rhero .known { display:none }
  .rhero .photo figcaption { bottom:22px; left:24px; text-align:right }
}

/* crema: de esto a esto (tachado → exacto) */
.swap { background:var(--cream); color:var(--ink); padding:10vh 0 11vh; position:relative; overflow:hidden }
.swap .intro { text-align:center; max-width:720px; margin:0 auto 60px }
.swap h2 { font-size:clamp(32px,4.6vw,68px); margin:6px 0 18px }
.swap .intro p { color:#4a4b60; max-width:62ch; margin-inline:auto }
.pairs { max-width:1000px; margin:0 auto; display:grid; gap:18px }
.pair { display:grid; grid-template-columns:1fr 60px 1.3fr; align-items:center; gap:20px; background:#fff; border:1px solid #E5E6EB; border-radius:22px; padding:24px 32px; box-shadow:0 20px 40px rgba(31,32,52,.08) }
.pair .vago { color:#6b6c7e; text-decoration:line-through; text-decoration-color:var(--coral); text-decoration-thickness:2px; font-size:17px }
.pair .to { text-align:center; color:var(--coral); font-size:24px }
.pair .exacto { font-weight:600; letter-spacing:-.01em; font-size:17px; line-height:1.4 }
.pair:nth-child(odd){ transform:translateX(-20px) } .pair:nth-child(even){ transform:translateX(20px) }
@media (max-width:800px){ .pair{ grid-template-columns:1fr; transform:none !important; gap:8px } .pair .to{ text-align:left; transform:rotate(90deg); width:24px } }

/* navy con puna: el lote paso a paso */
.lote { position:relative; overflow:hidden; padding:10vh 0 11vh; color:#fff; background:linear-gradient(rgba(31,32,52,.7), rgba(31,32,52,.7)), var(--navy) url(img/puna.webp) center/cover }
.lote .intro { text-align:center; max-width:720px; margin:0 auto 70px }
.lote .intro h2 { font-size:clamp(32px,4.6vw,68px); margin:6px 0 18px }
.lote .intro p { color:rgba(255,255,255,.9) }
.hitos { position:relative; max-width:1100px; margin:0 auto }
.hitos::before { content:''; position:absolute; left:50%; top:-8vh; bottom:-8vh; border-left:3px dashed var(--coral); opacity:.7 }
.hito { position:relative; isolation:isolate; width:calc(50% - 40px); padding:30px 34px; margin-bottom:22px; color:#fff } /* ponytail: sin caja; el fondo es un ::before con bordes desvanecidos por mask para que se funda con la foto */
.hito::before { content:''; position:absolute; inset:-48px -64px; z-index:-1; background:radial-gradient(ellipse at 50% 50%, rgba(31,32,52,.78) 30%, rgba(31,32,52,.45) 55%, rgba(31,32,52,0) 72%) } /* ponytail: halo oscuro sin borde; una máscara con backdrop-filter no renderizaba en Chrome */
.hito:nth-child(odd){ margin-right:auto } .hito:nth-child(even){ margin-left:auto; margin-top:-64px } /* las pares suben: menos columna vacía */
.hito .t { font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.7 }
.hito h3 { font-size:clamp(22px,2.2vw,30px); margin:6px 0 10px }
.hito p { font-size:15px; opacity:.95 }
.hito .badge { display:inline-block; margin-top:14px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff }
.hito::after { content:''; position:absolute; top:34px; width:16px; height:16px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 6px rgba(229,98,72,.25) }
.hito:nth-child(odd)::after { right:-48px } .hito:nth-child(even)::after { left:-48px }
.hito.m::before { background:radial-gradient(ellipse at 50% 50%, rgba(42,127,114,.7) 30%, rgba(42,127,114,.4) 55%, rgba(42,127,114,0) 72%) } /* hito final: tinte verde */
.hito.m .t, .hito.m p { opacity:1 }
@media (max-width:800px){ .hitos::before, .hito::after { display:none } .hito { width:100%; margin:0 0 18px !important } }

/* tres plataformas: tarjetas del index con lista */
.plats { background:var(--navy); padding:10vh 0 11vh; color:#fff }
.plats .intro { text-align:center; max-width:720px; margin:0 auto 60px } .plats .script, .vs .script { color:var(--coral) }
.plats .intro h2 { font-size:clamp(32px,4.6vw,68px); margin:6px 0 18px }
.plats .intro p { color:rgba(255,255,255,.8) }
.plats .card { min-height:0 }
.plats .card h3 { margin:14px 0 4px }
.plats .card small { display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; opacity:.65; margin-bottom:20px }
.plats .card ul { list-style:none; padding:0; display:grid; gap:10px; font-size:14px; font-weight:500; margin-bottom:8px }
.plats .card li::before { content:'✓'; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:11px; margin-right:10px; vertical-align:middle; background:var(--coral); color:#fff }
.plats .cards .card { margin-top:0 }

/* sage: cifras del país */
.cifras { background:var(--sage2); color:var(--ink); padding:10vh 0 11vh }
.cifras .intro { text-align:center; max-width:720px; margin:0 auto 60px }
.cifras h2 { font-size:clamp(32px,4.6vw,68px); margin:6px 0 18px }
.cifras .script { color:var(--ink) }
.cifras .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1100px; margin:0 auto }
.cifra { border-top:2px solid var(--coral); padding-top:18px }
.cifra b { display:block; font-weight:600; letter-spacing:-.03em; font-size:clamp(34px,3.6vw,52px); line-height:1; color:var(--ink); margin-bottom:12px }
.cifra p { font-size:15px; font-weight:500 }
.cifra small { display:block; margin-top:10px; font-size:12px; color:#4a4b60 }
@media (max-width:900px){ .cifras .grid{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .cifras .grid{ grid-template-columns:1fr } }

/* navy: lo que todos tienen vs lo que tú vas a tener */
.vs { background:var(--navy); padding:10vh 0 6vh; color:#fff }
.vs .intro { text-align:center; max-width:720px; margin:0 auto 60px }
.vs .intro h2 { font-size:clamp(32px,4.6vw,68px); margin:6px 0 18px }
.vs .intro h2 em { font-style:normal; color:var(--coral) }
.vs .two { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1000px; margin:0 auto }
.vs .col { border-radius:24px; padding:34px 36px; box-shadow:0 30px 60px rgba(0,0,0,.25) }
.vs .col.a { background:var(--mid); color:#fff; transform:rotate(-1.2deg) } .vs .col.b { background:var(--coral); color:var(--ink); transform:rotate(1deg); margin-top:30px }
.vs .col h3 { font-size:clamp(22px,2.2vw,30px); margin-bottom:20px }
.vs .col ul { list-style:none; padding:0; display:grid; gap:12px; font-size:15px; font-weight:500 }
.vs .col.a li { opacity:.7; text-decoration:line-through; text-decoration-color:var(--coral) }
.vs .col.b li::before { content:'✓'; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:11px; margin-right:10px; vertical-align:middle; background:var(--ink); color:#fff }
.vs blockquote { max-width:720px; margin:70px auto 0; text-align:center; font-weight:500; letter-spacing:-.02em; font-size:clamp(20px,2.2vw,30px); line-height:1.3 }
@media (max-width:800px){ .vs .two{ grid-template-columns:1fr } .vs .col{ transform:none !important; margin-top:0 !important } }

/* cierre: reutiliza .end de base.css; la foto en vez del hiker */
.end .photo { width:min(100%,900px); margin:40px auto -6vh; border-radius:30px; overflow:hidden; aspect-ratio:16/7; box-shadow:0 30px 60px rgba(31,32,52,.2) }
.end .photo img { width:100%; height:100%; object-fit:cover }