/* Aguas Abiertas Miramar. Colores del logo: azul marino del mar, azul del oleaje, naranja del amanecer y arena. */
:root {
  --mar: #0b2545;
  --mar-2: #13315c;
  --ola: #1f6fb2;
  --ola-claro: #e6f0f9;
  --sol: #f28c28;
  --sol-osc: #c4610a;
  --arena: #f7f1e6;
  --tinta: #13202f;
  --gris: #556373;
  --linea: #dbe3ec;
  --blanco: #ffffff;
  --sombra: 0 1px 2px rgb(11 37 69 / 8%), 0 12px 32px rgb(11 37 69 / 12%);
  --titulos: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --texto: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 1.0625rem/1.65 var(--texto); }
img, video { max-width: 100%; display: block; }
a { color: var(--ola); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; text-transform: uppercase; }
h3 { font-size: 1.55rem; font-weight: 700; }
p { margin: 0; max-width: 65ch; }
.envoltura { max-width: 1140px; margin-inline: auto; padding-inline: 16px; }
.etiqueta { font: 700 .82rem/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--sol-osc); }
.nota { color: var(--gris); font-size: .95rem; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--sol); color: var(--mar); padding: 8px 12px; border-radius: 8px; z-index: 30; }
.saltar:focus { left: 8px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font: 700 1rem/1 var(--texto); text-decoration: none; border: 2px solid transparent; }
.boton.sol { background: var(--sol); color: var(--mar); }
.boton.sol:hover { background: #ff9d3c; }
.boton.claro { border-color: rgb(255 255 255 / 70%); color: var(--blanco); }
.boton.claro:hover { background: rgb(255 255 255 / 12%); }
.boton.mar { background: var(--mar); color: var(--blanco); }
.boton.mar:hover { background: var(--mar-2); }
.boton svg { width: 20px; height: 20px; flex: none; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Barra */
.barra { position: sticky; top: 0; z-index: 20; background: rgb(11 37 69 / 94%); backdrop-filter: blur(8px); color: var(--blanco); }
.barra .envoltura { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--blanco); text-decoration: none; margin-right: auto;
  font: 800 1.35rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .03em; }
.marca img { width: 46px; height: auto; }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 8px 10px; border-radius: 8px; color: #d8e4f2; text-decoration: none; font-weight: 600; }
.menu a:hover { color: var(--blanco); background: rgb(255 255 255 / 8%); }
.menu a[aria-current="page"] { color: var(--sol); }
.abrir-menu { display: none; background: none; border: 2px solid rgb(255 255 255 / 40%); color: var(--blanco); border-radius: 10px;
  min-height: 42px; padding: 0 12px; font: 700 .95rem var(--texto); cursor: pointer; }

@media (max-width: 960px) {
  .abrir-menu { display: inline-flex; align-items: center; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; padding: 8px 16px 16px;
    background: var(--mar); box-shadow: var(--sombra); }
  .menu.abierto { display: flex; }
  .menu a { padding: 12px 10px; font-size: 1.1rem; }
}

/* Portada */
.portada { position: relative; color: var(--blanco); background: var(--mar); overflow: hidden; }
.portada video, .portada .fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 37 69 / 55%) 0%, rgb(11 37 69 / 35%) 45%, rgb(11 37 69 / 88%) 100%); }
.portada .envoltura { position: relative; z-index: 1; display: grid; gap: 22px; align-content: end; min-height: min(86vh, 760px); padding-block: 120px 64px; }
.portada .subtitulo { font: 600 1.15rem/1.4 var(--texto); color: #ffd7ad; max-width: 52ch; }
.portada .texto-principal { font-size: 1.2rem; max-width: 56ch; color: #eef4fb; }
.portada.chica .envoltura { min-height: 0; padding-block: 88px 48px; }

/* Cifras */
.cifras { background: var(--sol); color: var(--mar); }
.cifras ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifras li { padding: 22px 16px; border-left: 2px solid rgb(11 37 69 / 15%); font-weight: 600; }
.cifras li:first-child { border-left: 0; }
.cifras strong { display: block; font: 800 2.3rem/1 var(--titulos); }
@media (max-width: 760px) {
  .cifras ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras li:nth-child(3) { border-left: 0; }
  .cifras li:nth-child(n+3) { border-top: 2px solid rgb(11 37 69 / 15%); }
}

/* Bloques */
.bloque { padding-block: 72px; }
.bloque.arena { background: var(--arena); }
.bloque.mar { background: var(--mar); color: var(--blanco); }
.bloque.mar .etiqueta { color: var(--sol); }
.bloque.mar p { color: #d8e4f2; }
.bloque > .envoltura { display: grid; gap: 28px; }
.encabezado { display: grid; gap: 10px; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.dos img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sombra); }
@media (max-width: 860px) { .dos { grid-template-columns: minmax(0, 1fr); } }
.texto { display: grid; gap: 14px; }
.enlace-flecha { font-weight: 700; text-decoration: none; }
.enlace-flecha::after { content: " →"; }

/* Tarjetas */
.tarjetas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tarjeta { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 16px; background: var(--blanco);
  border: 1px solid var(--linea); box-shadow: var(--sombra); }
.tarjeta .fecha { font: 800 1.2rem/1 var(--titulos); color: var(--sol-osc); text-transform: uppercase; letter-spacing: .04em; }
.bloque.mar .tarjeta { background: var(--mar-2); border-color: rgb(255 255 255 / 12%); box-shadow: none; }
.bloque.mar .tarjeta p { color: #d8e4f2; }
.valores { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.valores li { padding: 6px 14px; border-radius: 999px; background: var(--ola-claro); color: var(--mar); font-weight: 700; }

/* Fundadores */
.fundadores { display: grid; gap: 28px; }
.fundador { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 28px; border-radius: 18px;
  background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.fundador .avatar { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: var(--mar);
  color: var(--sol); font: 800 2.6rem/1 var(--titulos); object-fit: cover; }
.fundador ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.fundador li::marker { color: var(--sol-osc); }
@media (max-width: 640px) { .fundador { grid-template-columns: minmax(0, 1fr); } .fundador .avatar { width: 96px; height: 96px; font-size: 1.9rem; } }
.cita { font: 700 clamp(1.6rem, 3.5vw, 2.3rem)/1.2 var(--titulos); color: var(--mar); max-width: 30ch; }
.cita footer { font: 600 1rem var(--texto); color: var(--gris); margin-top: 8px; }

/* Tablas */
.tabla { overflow-x: auto; border-radius: 14px; border: 1px solid var(--linea); background: var(--blanco); }
.tabla table { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla thead th { border-top: 0; background: var(--mar); color: var(--blanco); font: 700 .85rem/1.2 var(--texto); letter-spacing: .06em; text-transform: uppercase; }
.tabla tbody th { white-space: nowrap; font-weight: 700; }

/* Galería */
.galeria { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.galeria figure { margin: 0; display: grid; gap: 6px; }
.galeria img, .galeria video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--mar); }
.galeria figcaption { color: var(--gris); font-size: .9rem; }

/* Llamado */
.llamado { background: linear-gradient(135deg, var(--mar) 0%, var(--ola) 100%); color: var(--blanco); border-radius: 22px; padding: 48px 32px;
  display: grid; gap: 18px; justify-items: start; }
.llamado p { color: #e3edf8; }

/* Pie */
.pie { background: var(--mar); color: #c7d5e6; padding-block: 40px; font-size: .95rem; }
.pie .envoltura { display: grid; gap: 18px; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.pie img { width: 84px; height: auto; }
.pie a { color: var(--blanco); }
.pie .lineas { display: grid; gap: 6px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 640px) { .pie .envoltura { grid-template-columns: minmax(0, 1fr); } }

/* WhatsApp flotante */
.whatsapp { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 25; display: inline-flex;
  align-items: center; gap: 8px; min-height: 54px; padding: 0 18px 0 14px; border-radius: 999px; background: #1f9d55; color: #fff;
  font-weight: 700; text-decoration: none; box-shadow: var(--sombra); }
.whatsapp:hover { filter: brightness(1.08); }
.whatsapp svg { width: 26px; height: 26px; }
@media (max-width: 560px) {
  .whatsapp { padding: 0; width: 54px; justify-content: center; }
  .whatsapp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Eventos que ya pasaron (los oculta sitio.js en "Próximos") */
[data-fecha].paso { display: none; }
.sin-eventos { color: var(--gris); }
.portada .etiqueta, .llamado .etiqueta { color: #ffd7ad; }