/* Grupo Secacao — hoja de estilos compartida (basada en el concepto publicado en scc-secacao.pages.dev/concepto-web/) */
/* Paleta de marca: azul marino #062e5c · cian #5bcfe3 · lima #d0d400 */
:root {
  --musgo: #062e5c; --bosque: #0b4a86; --hoja: #1aa6c8; --brote: #d0d400; --agua: #5bcfe3; --agua-cl: #9fe3ef;
  --crema: #f4f8fb; --arena: #e6eef5; --tinta: #031d3d; --gris: #4f6178;
  --sans: -apple-system, 'SF Pro Display', 'Jost', 'Segoe UI', sans-serif;
  --barra: 70px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 16px); }
body { font-family: var(--sans); color: var(--tinta); background: var(--crema); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

/* ════ Barra superior: cristal, línea lima, menú con desplegables según el mapa del sitio ════ */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--barra); display: flex; align-items: center; justify-content: center; background: rgba(246,249,252,.9); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 3px solid var(--brote); box-shadow: 0 6px 18px -6px rgba(6,46,92,.22); }
.barra .in { width: min(1240px, 100% - 32px); height: 100%; display: flex; align-items: center; gap: 22px; }
.barra .logo { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; font-size: 17px; white-space: nowrap; }
.barra .logo .lgimg { width: 45px; height: 45px; }
.menu { margin-left: auto; display: flex; height: 100%; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu .top { display: block; padding: 8px 10px; font-size: 13.5px; color: #23395a; opacity: .86; border-radius: 10px; transition: opacity .2s, background .2s; white-space: nowrap; }
.menu > li:hover .top, .menu > li:focus-within .top { opacity: 1; background: rgba(91,207,227,.14); }
.menu > li.activo .top { opacity: 1; color: var(--musgo); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hoja); border-radius: 10px 10px 0 0; }
.menu .sub { position: absolute; top: calc(100% - 3px); left: 50%; translate: -50% 0; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.menu > li:hover .sub, .menu > li:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.menu > li:last-child .sub, .menu > li:nth-last-child(2) .sub { left: auto; right: 0; translate: none; }
.sub-in { min-width: 270px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 24px 50px -18px rgba(6,46,92,.35), 0 0 0 1px rgba(6,46,92,.06); }
.sub-in b { display: flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding: 8px 12px 10px; border-bottom: 1px solid var(--arena); margin-bottom: 6px; }
.sub-in b span, .sub-in a span, .movil span { font-variant-numeric: tabular-nums; color: var(--hoja); font-weight: 600; }
.sub-in a { display: flex; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; color: var(--tinta); }
.sub-in a span { font-size: 12px; min-width: 36px; padding-top: 2px; }
.sub-in a:hover, .sub-in a:focus-visible { background: var(--crema); color: var(--bosque); }
.clima-gt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--musgo); background: rgba(91,207,227,.16); border: 1px solid rgba(91,207,227,.45); border-radius: 20px; padding: 4px 11px 4px 8px; white-space: nowrap; }
.clima-gt[hidden] { display: none; }
.clima-gt svg { width: 18px; height: 18px; }
.clima-gt small { font-weight: 500; color: var(--gris); font-size: 12px; }
.hamb { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.hamb span { width: 22px; height: 2px; background: var(--musgo); border-radius: 2px; transition: transform .25s, opacity .25s; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.movil { position: fixed; z-index: 49; top: var(--barra); left: 0; right: 0; bottom: 0; overflow-y: auto; background: rgba(246,249,252,.98); padding: 14px 18px 40px; }
.movil details { border-bottom: 1px solid var(--arena); }
.movil summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; padding: 16px 4px; font-size: 18px; font-weight: 600; color: var(--musgo); }
.movil summary::-webkit-details-marker { display: none; }
.movil summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 22px; color: var(--hoja); }
.movil details[open] summary::after { content: "–"; }
.movil summary span { font-size: 13px; }
.movil a { display: flex; gap: 12px; padding: 10px 4px 10px 38px; font-size: 15.5px; color: var(--tinta); }
.movil a span { font-size: 12px; min-width: 38px; }
.movil details a:first-of-type { color: var(--bosque); font-weight: 500; }
.movil details[open] { padding-bottom: 10px; }
@media (max-width: 1240px) { .clima-gt { display: none !important; } }
@media (max-width: 1080px) { .menu { display: none; } .hamb { display: flex; } }
@media (min-width: 1081px) { .movil { display: none !important; } }
@media (max-width: 400px) { .barra .logo { font-size: 15px; } }

/* ════ Base de secciones ════ */
section { padding: clamp(80px, 12vw, 140px) 0; }
.ancho { width: min(1080px, 100% - 40px); margin: 0 auto; }
.titulo { font-size: clamp(34px, 5vw, 60px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.bajada { font-size: clamp(17px, 1.8vw, 21px); color: var(--gris); line-height: 1.5; max-width: 640px; margin-top: 16px; }
.eyebrow { font-size: clamp(15px, 1.6vw, 19px); font-weight: 500; color: #0b6f98; letter-spacing: .01em; }
h1 { font-weight: 600; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(42px, 7.6vw, 96px); margin-top: 10px; }
h1 .g { background: linear-gradient(100deg, var(--bosque) 10%, var(--hoja) 45%, var(--agua) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rev { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
.rev.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } }
.acciones { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-block; font-size: 16px; font-weight: 500; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer; font-family: inherit; transition: transform .2s, background .2s; }
.btn.pri { background: var(--musgo); color: #fff; } .btn.pri:hover { background: var(--bosque); transform: translateY(-1px); }
.btn.sec { color: var(--bosque); background: transparent; } .btn.sec:hover { text-decoration: underline; }

/* Subsecciones numeradas (02.01, 02.02…) */
.bloque { padding: clamp(64px, 9vw, 110px) 0; }
.bloque + .bloque { padding-top: 0; }
.bloque.suave, .bloque.suave + .bloque { padding-top: clamp(64px, 9vw, 110px); }
.bloque.suave { background: linear-gradient(180deg, var(--crema) 0%, #e9f4fa 100%); }
.num { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--musgo); background: var(--brote); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.texto { margin-top: 22px; max-width: 760px; color: var(--gris); font-size: 17px; line-height: 1.7; }
.texto p + p { margin-top: 14px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .dos { grid-template-columns: 1fr; } }

/* Marcador de contenido pendiente */
.pendiente { margin-top: 28px; border: 2px dashed rgba(26,166,200,.45); border-radius: 22px; padding: 26px 28px; background: repeating-linear-gradient(135deg, rgba(91,207,227,.06) 0 14px, transparent 14px 28px), #fff; }
.pendiente span { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0b6f98; }
.pendiente p { margin-top: 6px; color: var(--gris); font-size: 15.5px; line-height: 1.5; }

/* Encabezado de páginas internas */
.cabeza { position: relative; overflow: hidden; padding: calc(var(--barra) + clamp(56px, 9vw, 110px)) 0 clamp(48px, 7vw, 80px); background: radial-gradient(120% 90% at 50% 0%, #fbfdff 0%, #e9f4fa 45%, #d6ecf5 100%); }
.cabeza::after { content: ""; position: absolute; right: -60px; top: calc(var(--barra) + 30px); width: min(38vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(91,207,227,.28), transparent); pointer-events: none; }
.cabeza .ancho { position: relative; z-index: 1; }
.atajos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.atajos a { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #d6ecf5; border-radius: 999px; padding: 9px 16px; font-size: 14.5px; color: var(--musgo); box-shadow: 0 8px 20px -14px rgba(6,46,92,.4); transition: background .2s, transform .2s; }
.atajos a:hover { background: var(--musgo); color: #fff; transform: translateY(-1px); }
.atajos a span { font-size: 12px; font-weight: 600; color: var(--hoja); font-variant-numeric: tabular-nums; }
.atajos a:hover span { color: var(--brote); }

/* ════ Inicio 01.01: portada azul marino con motivos del logo ════ */
.portada { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; color: #fff; background: radial-gradient(70% 90% at 85% 30%, #0b4a86 0%, #062e5c 60%, #041f40 100%); padding: calc(var(--barra) + 40px) 0 120px; }
.portada .txt { position: relative; z-index: 2; }
.portada .eyebrow { color: var(--agua); }
.portada h1 { color: #fff; font-size: clamp(36px, 4.2vw, 62px); max-width: 12.5em; }
.portada h1 .g { background: linear-gradient(100deg, var(--agua) 0%, #9fe3ef 45%, var(--brote) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada .sub { margin-top: 22px; max-width: 600px; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.45; color: #c6d6ea; }
.portada .acciones { justify-content: flex-start; margin-top: 34px; }
.btn.lima { background: var(--brote); color: var(--musgo); font-weight: 600; } .btn.lima:hover { background: #e2e600; transform: translateY(-1px); }
.portada .btn.sec { color: var(--agua); }
.portada .forma-c { position: absolute; left: -1%; bottom: -1px; width: 30%; height: 100px; background: var(--agua); border-radius: 0 100px 0 0; pointer-events: none; }
.motivo { position: absolute; z-index: 1; right: max(-80px, calc((100vw - 1240px) / 2 - 60px)); top: 50%; translate: 0 -46%; width: min(52vw, 660px); pointer-events: none; }
.motivo .astro { transform-box: view-box; transform-origin: 300px 230px; animation: giraSol 90s linear infinite; }
.motivo .rayos-m line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: rayo 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rayo { to { stroke-dashoffset: 0; } }
.motivo .ondas ellipse { transform-box: fill-box; transform-origin: center; animation: onda 5s ease-in-out infinite; opacity: .55; }
.motivo .ondas ellipse:nth-child(2) { animation-delay: -1.6s; } .motivo .ondas ellipse:nth-child(3) { animation-delay: -3.2s; }
@keyframes onda { 50% { transform: scale(1.06); opacity: .2; } }
.capsula { position: absolute; z-index: 3; right: max(24px, calc((100vw - 1080px) / 2)); top: calc(var(--barra) + 30px); display: flex; align-items: center; gap: 12px; color: var(--musgo); background: var(--brote); padding: 12px 26px 12px 16px; border-radius: 999px; box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); transition: transform .2s; }
.capsula:hover { transform: translateY(-2px); }
.capsula svg { width: 40px; height: 40px; animation: giraSol 30s linear infinite; }
.capsula b { display: block; font-size: clamp(16px, 1.7vw, 22px); letter-spacing: -.01em; line-height: 1.15; }
.capsula span { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.scroll { position: absolute; z-index: 2; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #c6d6ea; letter-spacing: .12em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll::after { content: ""; width: 1px; height: 34px; background: linear-gradient(#c6d6ea, transparent); animation: baja 2s ease-in-out infinite; }
@keyframes baja { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 860px) {
  .portada { align-items: flex-start; padding-top: calc(var(--barra) + 120px); }
  .portada h1 br { display: none; }
  .motivo { width: 110vw; right: -30vw; top: auto; bottom: -40px; translate: none; opacity: .5; }
  .capsula { top: calc(var(--barra) + 18px); right: 16px; left: 16px; justify-content: center; padding: 10px 18px 10px 12px; gap: 10px; }
  .capsula svg { width: 28px; height: 28px; } .capsula b { font-size: 15px; } .capsula span { font-size: 10px; letter-spacing: .08em; }
  .portada .forma-c { width: 40%; height: 56px; border-radius: 0 56px 0 0; }
  .scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) { .motivo * { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ════ Inicio 01.02: paisaje animado a todo lo ancho, texto sobre el cielo (idea «Poweris») ════ */
.escena { position: relative; overflow: hidden; min-height: max(100vh, 720px); padding: clamp(110px, 15vh, 150px) 0 0; background: linear-gradient(180deg, #1aa6c8 0%, #5bcfe3 38%, #9fe3ef 70%, #c9f0f6 100%); }
.paisaje { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; will-change: transform; }
.paisaje svg, #gotas { position: absolute; inset: 0; width: 100%; height: 100%; }
#gotas { pointer-events: none; }
.escena-tx { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.escena .titulo { color: var(--musgo); }
.escena .bajada { color: #06375f; max-width: 560px; }
.escena .mas { display: inline-block; margin-top: 18px; color: var(--musgo); font-weight: 600; border-bottom: 2px solid var(--brote); padding-bottom: 2px; }
.escena .mas:hover { color: var(--bosque); }
.capa1 { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.sol .rayos { transform-box: fill-box; transform-origin: center; animation: giraSol 40s linear infinite; }
.sol { animation: lateSol 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes giraSol { to { transform: rotate(360deg); } }
@keyframes lateSol { 50% { opacity: .88; transform: scale(1.03); } }
.vertedero line { animation: cae .7s linear infinite; }
.nino { transform-box: fill-box; transform-origin: 50% 100%; animation: salta 1.6s ease-in-out infinite; }
.nino .brazo { transform-box: fill-box; transform-origin: 0% 100%; animation: saluda .8s ease-in-out infinite alternate; }
@keyframes salta { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px); } }
@keyframes saluda { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.palma path[stroke="#3f9a5a"] { transform-box: view-box; animation: brisaPalma 4s ease-in-out infinite alternate; }
@keyframes brisaPalma { to { transform: translateX(1.5px); } }
.salida { animation: brilla 2.5s ease-in-out infinite; }
@keyframes brilla { 50% { transform: translateX(26px); opacity: .1; } }
.rotulo { animation: flotaR 4s ease-in-out infinite; } .rotulo + .rotulo { animation-delay: -2s; }
@keyframes flotaR { 50% { transform: translateY(-4px); } }
@keyframes cae { to { stroke-dashoffset: -22; } }
.corriente path { animation: fluye 60s linear infinite; }
@keyframes fluye { to { stroke-dashoffset: -864; } }
.espuma ellipse { transform-box: fill-box; transform-origin: center; animation: espuma 1.4s ease-in-out infinite; }
@keyframes espuma { 50% { transform: scale(1.35, 1.2); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .paisaje * { animation: none !important; } }

/* Cifras en cristal azul marino sobre el cielo */
@media (max-width: 960px) { .escena-tx { grid-template-columns: 1fr; } }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(91,207,227,.3); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(3,29,61,.6); }
.cifra { background: rgba(6,46,92,.78); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); padding: 30px 26px; }
.cifra b { display: block; font-size: clamp(34px, 3.8vw, 52px); font-weight: 600; letter-spacing: -.03em; color: #fff; }
.cifra b small { font-size: .42em; font-weight: 500; color: var(--brote); margin-left: 4px; letter-spacing: 0; }
.cifra span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: #c6d6ea; }
@media (max-width: 760px) {
  .cifra { padding: 22px 18px; }
  .escena { min-height: 0; padding-bottom: 380px; }
  .paisaje { height: 420px; }
}

/* Recorrido: cada foto se abre de tarjeta a pantalla completa al hacer scroll */
.viaje { padding-bottom: 0; }
.viaje-h { text-align: center; } .viaje-h .titulo { margin-top: 8px; }
.esc { height: 210vh; position: relative; }
.esc-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.esc-img { position: absolute; inset: 0; margin: 0; overflow: hidden; clip-path: inset(var(--ci, 14%) var(--cx, 18%) round var(--cr, 34px)); will-change: clip-path; }
.esc-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zs, 1.18)) translateY(var(--zy, 0)); will-change: transform; }
.esc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,29,61,0) 30%, rgba(3,29,61,.72) 100%), linear-gradient(90deg, rgba(3,29,61,.45) 0%, rgba(3,29,61,0) 55%); opacity: var(--ov, 0); }
.esc-luz { position: absolute; inset: -30%; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); animation: barre 8s ease-in-out infinite; }
@keyframes barre { 0% { transform: translateX(-55%); } 55%, 100% { transform: translateX(55%); } }
.esc-gotas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.esc-tx { position: absolute; left: max(24px, calc((100vw - 1080px) / 2)); bottom: 11vh; max-width: 560px; color: #fff; opacity: var(--to, 0); transform: translateY(calc((1 - var(--to, 0)) * 40px)); }
.esc-tx .k { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--brote); font-weight: 600; }
.esc-tx h3 { font-size: clamp(34px, 5.4vw, 66px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; margin-top: 10px; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.esc-tx p { margin-top: 14px; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5; color: #eef4fa; max-width: 480px; }
@media (max-width: 760px) { .esc { height: 180vh; } .esc-tx { bottom: 8vh; right: 22px; } }
@media (prefers-reduced-motion: reduce) { .esc { height: auto; } .esc-pin { position: relative; height: 80vh; } .esc-img { clip-path: none; } .esc-img img { transform: none; } .esc-tx { opacity: 1; transform: none; } .esc-img::after { opacity: 1; } .esc-luz { display: none; } }

/* ════ Tarjetas de proyecto: carrusel horizontal ════ */
.centrales .fila { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 46px max(20px, calc((100vw - 1080px) / 2)) 30px; scrollbar-width: none; }
.centrales .fila::-webkit-scrollbar { display: none; }
.centrales.bloque { padding-bottom: clamp(40px, 6vw, 70px); }
.tarjeta { flex: 0 0 min(340px, 82vw); scroll-snap-align: center; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(6,46,92,.04), 0 24px 50px -24px rgba(6,46,92,.25); transition: transform .4s cubic-bezier(.2,.8,.2,1); display: block; }
.tarjeta:hover { transform: translateY(-6px); }
.tarjeta .foto { height: 220px; background: linear-gradient(135deg, var(--brote), var(--agua-cl)); position: relative; overflow: hidden; }
.tarjeta .foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s ease; }
.tarjeta:hover .foto img { transform: scale(1.1); }
.tarjeta .foto .mw { position: absolute; right: 14px; top: 14px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 20px; padding: 5px 12px; font-weight: 600; font-size: 14px; color: var(--musgo); }
.tarjeta .tx { padding: 22px 24px 26px; }
.tarjeta h3 { font-size: 22px; letter-spacing: -.02em; }
.tarjeta .an { font-size: 13px; color: #0b8fb3; font-weight: 600; letter-spacing: .03em; margin-top: 2px; }
.tarjeta p { margin-top: 10px; color: var(--gris); font-size: 15px; line-height: 1.5; }
.tarjeta .dato { margin-top: 14px; font-size: 13.5px; color: var(--bosque); font-weight: 500; display: flex; gap: 6px; align-items: center; }
.tarjeta .dato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hoja); }

/* ════ Pilares / tarjetas de contenido ════ */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.pilar { display: block; background: #fff; border-radius: 26px; padding: 34px 30px; box-shadow: 0 20px 40px -30px rgba(6,46,92,.3); }
a.pilar { transition: transform .3s, box-shadow .3s; } a.pilar:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -26px rgba(6,46,92,.38); }
.pilar .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #dff4f9, #f1f4c2); color: var(--bosque); }
.pilar h3 { margin-top: 22px; font-size: 21px; letter-spacing: -.02em; }
.pilar p { margin-top: 10px; color: var(--gris); line-height: 1.55; font-size: 15.5px; }
.pilar .ir { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--bosque); font-weight: 500; }
.pilar .pendiente { margin-top: 16px; padding: 16px 18px; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.grid3.areas { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid3.areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid3.areas { grid-template-columns: 1fr; } }

/* Emisiones evitadas */
.co2 { text-align: center; background: linear-gradient(180deg, var(--crema), #dff3f8); }
.co2 .big { font-size: clamp(64px, 13vw, 168px); font-weight: 600; letter-spacing: -.05em; line-height: 1; margin-top: 18px; background: linear-gradient(180deg, var(--musgo), var(--hoja)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co2 .u { font-size: clamp(17px, 2vw, 23px); color: var(--gris); margin-top: 10px; }
.co2 .bajada { margin: 22px auto 0; }
.sellos { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.sellos span { background: #fff; border-radius: 30px; padding: 9px 18px; font-size: 14px; color: var(--musgo); border: 1px solid #d6ecf5; box-shadow: 0 8px 20px -14px rgba(6,46,92,.4); }

/* ════ Fichas de proyecto ════ */
.ficha-cabeza { position: relative; overflow: hidden; min-height: 62vh; display: flex; align-items: flex-end; padding: calc(var(--barra) + 80px) 0 56px; color: #fff; background: linear-gradient(135deg, var(--musgo), var(--bosque) 60%, var(--hoja)); }
.ficha-cabeza > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha-cabeza::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,29,61,.15) 20%, rgba(3,29,61,.78) 100%); }
.ficha-cabeza.sin-foto { min-height: 46vh; }
.ficha-cabeza.sin-foto::after { background: radial-gradient(60% 80% at 90% 0%, rgba(91,207,227,.35), transparent 70%); }
.ficha-cabeza .ancho { position: relative; z-index: 1; }
.ficha-cabeza .eyebrow { color: var(--brote); }
.ficha-cabeza .bajada { color: #dbe9f6; }
.migas { font-size: 13.5px; color: #c6d6ea; margin-bottom: 18px; }
.migas a { color: #fff; } .migas a:hover { text-decoration: underline; }
.datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #d6ecf5; border-radius: 22px; overflow: hidden; margin-bottom: 64px; box-shadow: 0 20px 40px -30px rgba(6,46,92,.3); }
.datos div { background: #fff; padding: 24px 22px; }
.datos span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.datos b { display: block; margin-top: 8px; font-size: 18px; font-weight: 600; color: var(--musgo); letter-spacing: -.01em; }
@media (max-width: 860px) { .datos { grid-template-columns: 1fr 1fr; } }

/* ════ Documentos y formularios ════ */
.docs { margin-top: 30px; display: grid; gap: 12px; }
.doc { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 14px 30px -24px rgba(6,46,92,.35); }
.doc .ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #dff4f9; color: var(--bosque); font-size: 11px; font-weight: 700; }
.doc b { display: block; font-size: 16px; } .doc small { color: var(--gris); font-size: 13.5px; }
.doc .bt { margin-left: auto; font-size: 14px; color: #8aa0b8; white-space: nowrap; }
.form { margin-top: 30px; background: #fff; border-radius: 26px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 20px 40px -30px rgba(6,46,92,.3); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--musgo); }
.form .todo { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--tinta); border: 1px solid #cfe0ec; border-radius: 12px; padding: 12px 14px; background: var(--crema); transition: border-color .2s, background .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--hoja); background: #fff; box-shadow: 0 0 0 3px rgba(26,166,200,.15); }
.form textarea { min-height: 140px; resize: vertical; }
.form .pie-form { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form .pie-form small { color: var(--gris); font-size: 13px; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.canales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.canal { background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 20px 40px -30px rgba(6,46,92,.3); }
.canal span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.canal b { display: block; margin-top: 8px; font-size: 18px; color: var(--musgo); line-height: 1.4; font-weight: 600; }
.canal a:hover { color: var(--hoja); }
@media (max-width: 860px) { .canales { grid-template-columns: 1fr; } }

/* ════ Pie de página ════ */
footer { background: var(--tinta); color: #a9bdd6; padding: 60px 0 40px; font-size: 14px; border-top: 6px solid var(--brote); }
footer .ancho { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
footer .lg { width: 74px; height: 74px; margin-bottom: 14px; background: #fff; border-radius: 12px; padding: 6px; }
footer b { color: #fff; display: block; margin-bottom: 10px; font-weight: 600; }
footer p { line-height: 1.8; }
footer a:hover { color: #fff; }
footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; font-size: 12.5px; color: #7f93ad; }
@media (max-width: 760px) { footer .ancho { grid-template-columns: 1fr; } }