/* Pique · sitio. Océano de noche: azul abisal, espuma, turquesa y un toque de coral. */
:root {
  --abismo: #04101F; --hondo: #071B33; --mar: #0B2D4F; --turquesa: #2DD4BF; --cielo: #38BDF8; --espuma: #EAF7F6;
  --niebla: #A9C2CF; --coral: #FF7A59; --oro: #F5C76B; --arena: #F4E7CF;
  --display: 'Bricolage Grotesque', 'Quicksand', system-ui, sans-serif; --texto: 'Quicksand', system-ui, sans-serif;
  --ancho: min(1180px, 100% - 40px); --radio: 24px;
  /* Escala única de espacios: 8 · 16 · 24 · 32-48 · 48-72, y el mismo aire entre todas las secciones. */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: clamp(32px, 4vw, 48px); --e5: clamp(48px, 6vw, 72px); --seccion: clamp(88px, 11vw, 144px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--abismo); color: var(--espuma); font: 500 17px/1.6 var(--texto); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); line-height: 1.02; font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--espuma); color: var(--abismo); padding: 8px 14px; border-radius: 10px; z-index: 50; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 8px; }
.etiqueta { font: 700 .78rem/1 var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--turquesa); margin-bottom: var(--e2); }
.etiqueta-oro { color: var(--oro); }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font: 700 1rem/1 var(--texto); text-decoration: none; transition: transform .25s, background .25s, box-shadow .25s; }
.boton:hover { transform: translateY(-2px); }
.boton-luz { background: linear-gradient(120deg, var(--turquesa), var(--cielo)); color: var(--abismo); box-shadow: 0 10px 40px -10px #2dd4bf99; }
.boton-luz:hover { box-shadow: 0 16px 50px -10px #2dd4bfcc; }
.boton-vidrio { background: #ffffff14; border: 1px solid #ffffff38; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; }
.boton-claro { background: var(--espuma); color: var(--abismo); padding: 10px 18px; font-size: .92rem; }

/* Barra */
.barra { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 16px max(20px, calc((100% - 1180px) / 2)); transition: background .35s, padding .35s, backdrop-filter .35s; color: #fff; }
.barra.solida { background: #04101fcc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 #ffffff14; }
.marca { display: inline-flex; color: #fff; }
.barra nav { display: flex; align-items: center; gap: 26px; font-weight: 700; font-size: .95rem; }
.barra nav a:not(.boton) { text-decoration: none; opacity: .85; transition: opacity .2s; }
.barra nav a:not(.boton):hover { opacity: 1; }
@media (max-width: 720px) { .barra nav a:not(.boton) { display: none; } }

/* Portada */
.portada { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 120px max(20px, calc((100% - 1180px) / 2)) 150px; overflow: hidden; isolation: isolate; }
.portada-fondo { position: absolute; inset: 0; z-index: -1; }
.portada-foto, #agua { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-foto { animation: acercar 28s ease-in-out infinite alternate; transform-origin: 30% 40%; }
/* Video de portada: espejado para que el pescador quede a la derecha, lejos del texto; en el celular el encuadre se corre hacia él. */
.portada-video { animation: none; object-position: 50% 50%; transform: scaleX(-1); transform-origin: 50% 50%; }
@media (max-width: 760px) { .portada-video { object-position: 32% 50%; } }
/* Velo más liviano para que se vea el turquesa del río; la sombra se concentra detrás del texto. */
.portada-video ~ .velo { background: linear-gradient(180deg, #04101f73 0%, #04101f0d 28%, #04101f26 55%, #04101f 100%), radial-gradient(90% 70% at 15% 75%, #04101fb3, transparent 65%); }
#agua { opacity: 0; transition: opacity 1.2s; }
#agua.vivo { opacity: 1; }
#agua.vivo ~ .velo { background: linear-gradient(180deg, #04101f88 0%, #04101f22 35%, #04101f55 62%, #04101f 100%), radial-gradient(120% 90% at 20% 90%, #04101fcc, transparent 60%); }
.velo { position: absolute; inset: 0; background: linear-gradient(180deg, #04101f99 0%, #04101f33 35%, #04101f66 62%, #04101f 100%), radial-gradient(120% 90% at 20% 90%, #04101fcc, transparent 60%); }
@keyframes acercar { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.portada-texto { max-width: 760px; }
.sobre { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; padding: 8px 16px 8px 12px; border-radius: 999px; background: #ffffff12; border: 1px solid #ffffff26; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: var(--e3); }
.latido { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 #ff7a59aa; animation: latir 2s infinite; }
@keyframes latir { 70% { box-shadow: 0 0 0 12px #ff7a5900; } 100% { box-shadow: 0 0 0 0 #ff7a5900; } }
h1 { font-size: clamp(3rem, 9.5vw, 7.6rem); line-height: .92; font-weight: 800; letter-spacing: -0.045em; text-wrap: balance; }
h1 .linea { display: block; overflow: hidden; }
h1 .linea, h1 .linea > * { animation: subir 1.1s cubic-bezier(.2,.8,.2,1) both; }
h1 .linea:nth-child(2) { animation-delay: .15s; }
h1 em { font-style: normal; background: linear-gradient(100deg, var(--turquesa), var(--cielo) 50%, var(--espuma)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes subir { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
.bajada { margin-top: var(--e3); font-size: clamp(1.08rem, 2vw, 1.3rem); max-width: 560px; color: #dcebf0; animation: aparecer 1.2s .5s both; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); animation: aparecer 1.2s .7s both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.credito-foto { position: absolute; right: max(20px, calc((100% - 1180px) / 2)); bottom: 120px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; writing-mode: vertical-rl; transform: rotate(180deg); }
.olas { position: absolute; left: 0; bottom: -1px; width: 100%; height: 130px; }
.ola { fill: var(--abismo); }
.o1 { opacity: .35; animation: deriva 14s linear infinite; }
.o2 { opacity: .55; animation: deriva 10s linear infinite reverse; }
.o3 { animation: deriva 18s linear infinite; }
@keyframes deriva { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cinta */
.cinta { padding-block: var(--e3); overflow: hidden; border-block: 1px solid #ffffff10; }
.cinta-pista { display: flex; gap: 46px; width: max-content; animation: cinta 46s linear infinite; font: 700 clamp(1.05rem, 2.2vw, 1.45rem)/1.3 var(--display); white-space: nowrap; }
.cinta-pista span { color: #d7e9ee; }
.cinta-pista span:nth-child(3n+1) { color: var(--turquesa); }
.cinta:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta-nota { width: var(--ancho); margin: 12px auto 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #6f8ca0; }

/* Manifiesto */
.manifiesto { width: var(--ancho); margin: 0 auto; padding: var(--seccion) 0 var(--e5); }
.encender { font: 700 clamp(1.7rem, 4.4vw, 3.4rem)/1.18 var(--display); letter-spacing: -0.02em; max-width: 1050px; }
.encender .p { color: #2a4560; transition: color .5s; }
.encender .p.on { color: var(--espuma); }
.encender .p.on.acento { color: var(--turquesa); }

/* Revelar al aparecer */
.revelar { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.revelar.visto { opacity: 1; transform: none; }

/* Orilla */
.orilla { width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--e5); align-items: center; }
.orilla-texto > p:not(.etiqueta) { margin-top: var(--e3); color: var(--niebla); font-size: 1.1rem; max-width: 520px; }
.pines-lista { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; gap: var(--e2); font-weight: 700; }
.pines-lista li { display: flex; align-items: center; gap: 14px; }
.pin { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent); }
.p-pica { --c: #FF7A59; } .p-mar { --c: #F43F5E; } .p-lluvia { --c: #60A5FA; } .p-aves { --c: #C084FC; } .p-fisca { --c: #4ADE80; }
.mapa { position: relative; aspect-ratio: 200 / 720; max-height: 640px; justify-self: center; height: 640px; }
.mapa-chile { width: 100%; height: 100%; filter: drop-shadow(0 0 18px #2dd4bf55); }
.mpin { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); }
.mpin::before, .mpin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); animation: onda 3.2s var(--d) infinite; }
.mpin::after { animation-delay: calc(var(--d) + 1.1s); }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }
.mpin b { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font: 700 .78rem/1 var(--texto); white-space: nowrap; color: #cfe6ec; background: #04101fcc; padding: 4px 8px; border-radius: 8px; opacity: 0; animation: nombre 6.4s var(--d) infinite; }
@keyframes nombre { 0%, 70%, 100% { opacity: 0; } 10%, 55% { opacity: 1; } }
@media (max-width: 860px) { .orilla { grid-template-columns: 1fr; } .mapa { height: 520px; } }

/* Salidas: franja con foto; su propio relleno da el aire con la sección anterior y la siguiente. */
.salidas { position: relative; padding: var(--seccion) 0; overflow: hidden; isolation: isolate; }
.salidas-foto { position: absolute; inset: 0; z-index: -1; }
.salidas-foto img { width: 100%; height: 120%; object-fit: cover; transform: translateY(var(--paralaje, 0)); }
.salidas-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #04101ff2 0%, #04101fb3 45%, #04101f55 100%), linear-gradient(180deg, var(--abismo), transparent 18%, transparent 82%, var(--abismo)); }
/* Solo el texto, alineado como las cabeceras de las demás secciones. */
.salidas-contenido { width: var(--ancho); margin: 0 auto; }
.salidas-contenido > div { max-width: 760px; }
.salidas-contenido > div > p:not(.etiqueta) { margin-top: var(--e3); font-size: 1.12rem; color: #d2e3ea; max-width: 480px; }

/* Agua a la vista */
/* Tras una franja con foto no se suma más aire: la franja ya trae el suyo. */
.agua { width: var(--ancho); margin: 0 auto; padding: 0 0 var(--seccion); }
.cabecera { max-width: 760px; margin-bottom: var(--e4); }
.cabecera > p:not(.etiqueta) { margin-top: var(--e3); color: var(--niebla); font-size: 1.15rem; }
.tarjetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.tarjeta { position: relative; border-radius: var(--radio); overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; isolation: isolate; }
.tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.tarjeta:hover img { transform: scale(1.08); }
.tarjeta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 22%, #04101fb8 58%, #04101ff5 92%); }
.tarjeta > div { padding: var(--e3); }
.tarjeta p { margin-top: var(--e1); color: #d2e3ea; font-size: .95rem; line-height: 1.5; }
.tarjeta:nth-child(2) { transition-delay: .1s; } .tarjeta:nth-child(3) { transition-delay: .2s; } .tarjeta:nth-child(4) { transition-delay: .3s; }
@media (max-width: 980px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tarjetas { grid-template-columns: 1fr; } .tarjeta { min-height: 300px; } }
.cifras { list-style: none; padding: var(--e5) 0 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e4) var(--e3); border-top: 1px solid #ffffff14; }
.cifras li { display: grid; gap: var(--e1); align-content: start; }
.cifras strong { display: block; font: 800 clamp(2.2rem, 4.8vw, 3.6rem)/1 var(--display); letter-spacing: -0.03em; background: linear-gradient(180deg, #fff, #8fd9e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifras span { color: var(--niebla); font-weight: 600; font-size: .95rem; }
/* En el celular, la primera cifra va sola arriba y las otras cuatro en dos filas parejas. */
@media (max-width: 760px) { .cifras { grid-template-columns: 1fr 1fr; } .cifras li:first-child { grid-column: 1 / -1; } }

/* Pro */
.pro { position: relative; width: var(--ancho); margin: 0 auto; padding: var(--e5) clamp(20px, 5vw, 72px); border-radius: 32px; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #0d2747, #071528 60%); border: 1px solid #f5c76b33; }
.pro-brillo { position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; background: radial-gradient(circle, #f5c76b2e, transparent 60%); animation: brillo 12s ease-in-out infinite alternate; }
@keyframes brillo { to { transform: translate(-30%, 30%); } }
.pro-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.pro-item { padding: var(--e3); border-radius: var(--radio); background: #ffffff08; border: 1px solid #ffffff14; transition: border-color .3s, transform .3s, background .3s; }
.pro-item:hover { border-color: #f5c76b66; transform: translateY(-4px); background: #ffffff0d; }
.pro-icono { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(140deg, #f5c76b33, #f5c76b0d); color: var(--oro); font-size: 1.35rem; margin-bottom: var(--e2); }
.pro-item p { margin-top: var(--e1); color: var(--niebla); font-size: .97rem; }
@media (max-width: 900px) { .pro-grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pro-grilla { grid-template-columns: 1fr; } }

/* Cuidar */
.cuidar { width: var(--ancho); margin: 0 auto; padding-top: var(--seccion); display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--e5); align-items: start; }
.valores { list-style: none; padding: 0; margin: 0; display: grid; }
.valores li { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--e3); padding: var(--e3) 0; border-bottom: 1px solid #ffffff14; }
.valores strong { font: 700 1.2rem/1.3 var(--display); }
.valores span { color: var(--niebla); }
@media (max-width: 860px) { .cuidar { grid-template-columns: 1fr; } .valores li { grid-template-columns: 1fr; gap: var(--e1); } }

/* Súmate */
.sumate { position: relative; text-align: center; padding: var(--seccion) 20px; overflow: hidden; isolation: isolate; }
.sumate-fondo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 100%, #0e7490aa, transparent 70%), radial-gradient(40% 50% at 15% 30%, #1d4ed844, transparent 70%), radial-gradient(40% 50% at 85% 20%, #2dd4bf33, transparent 70%); animation: marea 14s ease-in-out infinite alternate; }
@keyframes marea { to { transform: translateY(-6%) scale(1.06); } }
.sumate h2 { font-size: clamp(2.8rem, 9vw, 7rem); letter-spacing: -0.045em; }
.sumate > div > p { margin-top: var(--e3); font-size: 1.2rem; color: #d2e3ea; }
.tiendas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); margin-top: var(--e4); }
.tienda { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 18px; border-radius: 16px; background: #ffffff10; border: 1px solid #ffffff2e; text-align: left; }
.tienda svg { width: 26px; height: 26px; fill: currentColor; }
.tienda span { display: grid; font: 700 1.1rem/1.15 var(--display); }
.tienda small { font: 600 .72rem/1.2 var(--texto); color: var(--niebla); letter-spacing: .04em; }
.sumate-correo { margin-top: var(--e4) !important; font-size: 1rem !important; color: var(--niebla) !important; }
.sumate-correo a { color: var(--turquesa); font-weight: 700; }

/* Pie */
.pie { width: var(--ancho); margin: 0 auto; padding: var(--e4) 0; border-top: 1px solid #ffffff14; color: var(--niebla); font-size: .92rem; }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2); }
.pie nav { display: flex; flex-wrap: wrap; gap: var(--e3); }
.pie nav a { text-decoration: none; font-weight: 700; color: #d2e3ea; }
.pie details { margin-top: var(--e3); }
.pie summary { cursor: pointer; font-weight: 700; color: #d2e3ea; }
.creditos { margin-top: 12px; font-size: .85rem; line-height: 1.6; }
.creditos ul { padding-left: 18px; }
.creditos a { color: #9fdde4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
  .encender .p { color: var(--espuma); }
}

/* Punto "en vivo": rojo suave que parpadea. */
.vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FF4D4F; margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 0 #ff4d4f88; animation: envivo 1.6s ease-in-out infinite; }
@keyframes envivo { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 #ff4d4f66; } 50% { opacity: .35; box-shadow: 0 0 0 6px #ff4d4f00; } }
.cinta .cinta-nota { margin: 0 auto var(--e2); color: #ffb3b4; font-weight: 700; }
.cinta-pista span { display: inline-flex; align-items: center; gap: 12px; }
.cinta-pista span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #2a4560; margin-left: 34px; }
/* Cifras antes de "En vivo" */
.numeros { width: var(--ancho); margin: 0 auto; padding-bottom: var(--seccion); }

/* Sello oficial de App Store: conserva proporción y arte originales. */
.tienda-appstore { padding: 0; border: 0; border-radius: 0; background: transparent; }
.tienda-appstore img { display: block; width: auto; height: 60px; }
.tienda-appstore:focus-visible { outline: 3px solid var(--espuma); outline-offset: 6px; }