/* ---------- FUENTES PROPIAS ----------
   Servidas desde este mismo dominio. Antes venian de los servidores de
   Google, lo que enviaba la IP de cada visitante a un tercero fuera de
   la UE y ademas bloqueaba el primer pintado. */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fuentes/space-grotesk-300.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fuentes/space-grotesk-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fuentes/space-grotesk-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fuentes/space-grotesk-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fuentes/instrument-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fuentes/instrument-sans-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fuentes/jetbrains-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fuentes/jetbrains-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
    --cal:#F5F1E8;
    --tarjeta:#FCFAF5;
    --hundida:#EAE6DA;
    --borde:#DCD9CE;
    --borde-fuerte:#8A8A85;   /* 3,08:1 */
    --tinta:#132126;          /* negro con petroleo disuelto dentro */
    --tinta-2:#4F5C60;        /* 6,14:1 */
    --tinta-3:#5D686C;        /* 5,09:1 */
    --petroleo:#0F6E74;       /* 5,32:1 — color de marca */
    --petroleo-osc:#0A5459;   /* 7,68:1 — texto y enlaces */
    --petroleo-tenue:#DDEAEA;
    --anil:#2B3F8F;           /* 8,43:1 — apoyo. Indigo real: dE 57,6 del petroleo */
    --anil-claro:#3D53AD;
    --anil-tenue:#E1E4F2;

    --display:'Space Grotesk', system-ui, sans-serif;
    --texto:'Instrument Sans', system-ui, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, monospace;

    --col:min(1400px, 100% - 6vw);
    --lectura:min(66ch, 100%);
  }

  /* El modo claro es el de partida, siempre. El oscuro se activa a mano. */
  html{color-scheme:light; background:#F5F1E8;}
  html[data-tema="oscuro"], html[data-tema="oscuro"] body{
    color-scheme:dark; background:#101619;
    --cal:#101619; --tarjeta:#182126; --hundida:#0C1114;
    --borde:#26333A; --borde-fuerte:#5E6E75;
    --tinta:#E9EFF0; --tinta-2:#9DAAAF; --tinta-3:#87959A;
    --petroleo:#3FA9AF; --petroleo-osc:#63C2C7; --petroleo-tenue:#132A2D;
    --anil:#8B9BF0; --anil-claro:#6C7FE2; --anil-tenue:#1A2140;
  }
  body, header, .obra, .tema{
    transition:background-color .32s ease, color .32s ease, border-color .32s ease;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; min-height:100%;}
  body{
    margin:0; background:#F5F1E8; background:var(--cal); color:var(--tinta);

    font-family:var(--texto); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{width:var(--col); margin-inline:auto;}

  /* Capa de fondo fija: garantiza el color aunque el contenedor lo anule */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background:var(--cal); pointer-events:none;
  }
  main, footer{background:var(--cal);}

  ::selection{background:var(--petroleo); color:var(--cal);}
  a{color:var(--petroleo-osc);}
  :focus-visible{outline:2px solid var(--petroleo); outline-offset:3px; border-radius:2px;}

  /* Enlace de salto: invisible hasta que alguien navega con teclado */
  .salto{
    position:absolute; left:50%; transform:translate(-50%,-140%);
    z-index:80; background:var(--petroleo); color:#FCFAF5;
    padding:10px 18px; border-radius:0 0 10px 10px; text-decoration:none;
    font-family:var(--mono); font-size:12px; letter-spacing:.1em;
    transition:transform 180ms var(--asiento);
  }
  .salto:focus{transform:translate(-50%,0);}

  /* ---------- LOGOTIPO ---------- */
  .marca{display:inline-flex; align-items:center; text-decoration:none;}
  .logotipo{
    display:flex; align-items:baseline;
    font-family:var(--display); font-weight:500; font-size:clamp(19px,1.6vw,24px);
    letter-spacing:-0.03em; color:var(--tinta); line-height:1;
  }
  /* El glifo es la ele. Va por mascara para que herede el color del tema. */
  .glifo{
    display:inline-block; flex:none; background-color:currentColor;
    -webkit-mask:url('glifo.svg') no-repeat center/contain;
            mask:url('glifo.svg') no-repeat center/contain;
    aspect-ratio:1072/1496;
  }
  .logotipo{color:var(--tinta); font-weight:300; letter-spacing:-0.02em;}
  /* La ele es un ascendente: tiene que llegar a la altura de la h, no a la
     de la equis. Se alinea por la base como cualquier otra letra. */
  .logotipo .glifo{height:1.30em; align-self:baseline; color:var(--petroleo); margin-right:.10em;}
  .logotipo .on{color:var(--tinta);}
  .logotipo .pi{color:var(--petroleo);}

  /* ---------- CABECERA ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:var(--cal);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease;
  }
  header.pegado{border-bottom-color:var(--borde);}
  header .wrap{display:flex; justify-content:space-between; align-items:center; padding:15px 0;}
  .lugar{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--tinta-3);}
  .zona-dcha{display:flex; align-items:center; gap:13px;}
  .tema{
    appearance:none; -webkit-appearance:none; background:transparent;
    border:1px solid var(--borde-fuerte); color:var(--tinta-2);
    width:32px; height:32px; border-radius:999px; padding:0; flex:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .tema:hover{color:var(--tinta); border-color:var(--tinta-3); background:var(--hundida);}
  .tema svg{display:block;}

  /* ---------- RÓTULOS DE SECCIÓN ---------- */
  .rotulo{
    font-family:var(--mono); font-size:clamp(10.5px, .82vw, 12.5px); letter-spacing:.2em;
    text-transform:uppercase; color:var(--tinta-2);
    text-align:center; margin-bottom:clamp(26px, 3vw, 44px);
  }
  .rotulo b{font-weight:500; color:var(--anil);}

  section{padding:clamp(64px, 8vw, 132px) 0;}

  /* ---------- HERO ---------- */
  .hero{padding:clamp(44px, 6vw, 96px) 0 clamp(60px, 8vw, 120px); text-align:center;}
  h1{
    font-family:var(--display); font-weight:500;
    font-size:clamp(31px, 6.6vw, 92px); line-height:1.03; letter-spacing:-0.04em;
    margin:0 auto clamp(20px, 2.4vw, 34px); max-width:15ch; color:var(--tinta);
  }
  .lede{
    font-size:clamp(15.5px, 1.5vw, 21px); color:var(--tinta-2);
    max-width:56ch; margin:0 auto clamp(26px, 3vw, 40px);
  }
  .lede strong{color:var(--tinta); font-weight:500;}

  .acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .cta{
    display:inline-block; text-decoration:none; font-family:var(--texto);
    font-size:clamp(14.5px, 1.05vw, 16.5px); font-weight:500;
    padding:clamp(12px,1vw,16px) clamp(24px,2.2vw,34px); border-radius:999px;
    background:var(--petroleo); color:#FCFAF5; border:1px solid transparent;
    transition:transform .16s ease, background .16s ease;
  }
  .cta:hover{background:var(--petroleo-osc); transform:translateY(-1px);}

  /* En modo oscuro el petroleo se aclara para poder leerse como texto, y eso
     deja el boton demasiado claro para llevar texto blanco: daba 3,4:1. Con
     tinta oscura encima sube a 5,17:1. Es lo normal en temas oscuros: el
     acento vivo va de fondo y el texto se oscurece. */
  /* Ojo: esto vale solo para el boton relleno. El de borde tambien es .cta, y
     sin el :not() heredaba la tinta oscura y se quedaba invisible en oscuro. */
  html[data-tema="oscuro"] .cta:not(.linea),
  html[data-tema="oscuro"] .via.principal{color:#101619;}
  html[data-tema="oscuro"] .cta:not(.linea):hover,
  html[data-tema="oscuro"] .via.principal:hover{background:var(--petroleo-osc); color:#101619;}
  .cta.linea{background:transparent; color:var(--anil); border-color:var(--anil); }
  .cta.linea:hover{background:var(--anil-tenue); border-color:var(--anil);}



  /* ---------- EL GLIFO QUE SE DIBUJA SOLO ----------
     Es el mismo trazado del logotipo. Al ser un contorno cerrado, dibujarlo
     con stroke-dasharray parece que alguien perfila la letra a plumilla.
     La caja lleva medidas fijas para que el hueco se reserve antes de pintar
     y el texto de debajo no salte. */
  .glifo-zona{
    width:clamp(96px, 12vw, 168px);
    margin:clamp(6px,1vw,14px) auto clamp(18px,2.2vw,30px);
    aspect-ratio:1212/1636;
  }
  .glifo-anim{width:100%; height:100%; display:block; overflow:visible;}
  .ga-relleno{fill:var(--petroleo); opacity:0;}
  .ga-trazo{
    fill:none; stroke:var(--petroleo); stroke-width:150;
    stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:75806; stroke-dashoffset:75806;
  }
  @keyframes ga-traza{
      0%  {stroke-dashoffset:75806;  opacity:1;}
     34%  {stroke-dashoffset:0;    opacity:1;}
     42%  {stroke-dashoffset:0;    opacity:0;}
     68%  {stroke-dashoffset:0;    opacity:0;}
     76%  {stroke-dashoffset:0;    opacity:1;}
    100%  {stroke-dashoffset:-75806; opacity:1;}
  }
  @keyframes ga-rellena{
      0%,36%  {opacity:0;}
     44%,70%  {opacity:1;}
     78%,100% {opacity:0;}
  }
  .glifo-zona .ga-trazo  {animation:ga-traza   5.2s cubic-bezier(.62,.02,.35,1) infinite;}
  .glifo-zona .ga-relleno{animation:ga-rellena 5.2s ease infinite;}

  /* Sin movimiento: la letra se queda puesta y quieta, sin animar nada. */
  @media (prefers-reduced-motion:reduce){
    .glifo-zona .ga-trazo{animation:none; opacity:0;}
    .glifo-zona .ga-relleno{animation:none; opacity:1;}
  }

  /* ---------- CAPACIDADES ---------- */
  .capacidades{display:grid; gap:0;}
  .cap{
    padding:clamp(26px, 3.2vw, 46px) 0; border-top:1px solid var(--borde);
    text-align:center;
  }
  .cap:last-child{border-bottom:1px solid var(--borde);}
  .cap .tri{
    display:block; width:0; height:0; margin:0 auto clamp(11px,1.2vw,17px);
    border-left:9px solid transparent; border-right:9px solid transparent;
    border-bottom:13px solid var(--petroleo);
  }
  .cap h3{
    font-family:var(--display); font-weight:500;
    font-size:clamp(19px, 2.1vw, 30px);
    letter-spacing:-0.025em; margin:0 0 clamp(7px,.8vw,12px); color:var(--tinta);
  }
  .cap p{
    margin:0 auto clamp(12px,1.2vw,18px); font-size:clamp(15px,1.15vw,17.5px);
    color:var(--tinta-2); max-width:var(--lectura);
  }
  .marcas{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
  .marcas i{
    font-style:normal; font-family:var(--mono); letter-spacing:.04em;
    padding:4px 11px; border-radius:999px; border:1px solid var(--borde-fuerte);
    color:var(--tinta-2); font-size:clamp(10px,.78vw,12px);
  }

  /* ---------- PROCESO ---------- */
  .pasos{list-style:none; margin:0; padding:0; counter-reset:p;}
  .pasos{position:relative;}
  /* la espina: el proceso como una línea que baja */
  .pasos::before{
    content:""; position:absolute; left:50%; top:14px; bottom:14px; width:1px;
    background:var(--borde); transform:translateX(-.5px);
  }
  .pasos li{
    padding:clamp(24px,3vw,44px) 0; text-align:center; position:relative;
    border-radius:14px;
  }
  .plazo{
    display:inline-block; font-family:var(--mono);
    font-size:clamp(9.5px,.72vw,11px); letter-spacing:.16em; text-transform:uppercase;
    color:var(--tinta-3); margin-top:clamp(9px,1vw,13px);
    padding:3px 11px; border:1px solid var(--borde); border-radius:999px;
    background:var(--cal);
  }
  .pasos .num-wrap{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:0;
    margin-bottom:clamp(11px,1.2vw,17px);
  }
  .pasos .num-corchete{
    font-family:var(--mono); font-size:clamp(11px,.85vw,13px);
    color:var(--anil); letter-spacing:.16em;
    white-space:nowrap;
    transition:transform 320ms var(--asiento);
  }
  .pasos .num-izq{
    transform:translateX(0);
    margin-right:6px;
  }
  .pasos .num-der{
    transform:translateX(0);
    margin-left:6px;
  }
  .pasos .num{
    font-family:var(--mono); font-size:clamp(11px,.85vw,13px);
    color:var(--anil); letter-spacing:.16em;
  }
  .pasos h3{
    font-family:var(--display); font-weight:500; font-size:clamp(17px,1.7vw,24px);
    margin:0 0 clamp(5px,.6vw,9px); letter-spacing:-0.02em;
  }
  .pasos p{
    margin:0 auto; font-size:clamp(15px,1.1vw,17px); color:var(--tinta-2);
    max-width:var(--lectura);
  }

  /* ---------- PROYECTOS ---------- */
  .obras{display:flex; flex-wrap:wrap; gap:clamp(12px,1.2vw,20px); justify-content:center;}
  .obra{
    flex:1 1 300px; max-width:450px;
    background:var(--tarjeta); border:1px solid var(--borde); border-radius:14px;
    padding:clamp(22px,2.2vw,34px) clamp(20px,2vw,28px); text-align:center;
  }
  @media(max-width:700px){.obra{flex-basis:100%;}}
  .obra .tipo{
    font-family:var(--mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--anil); display:block; margin-bottom:9px;
  }
  /* El resumen es un <button> de verdad, no un div que escucha clics.
     Safari en iOS no dispara clics fiables sobre elementos no interactivos,
     y ademas asi funciona con teclado y lo anuncia un lector de pantalla. */
  .obra-cab{
    appearance:none; -webkit-appearance:none; background:none; border:0;
    font:inherit; color:inherit; width:100%; padding:0; margin:0;
    text-align:center; cursor:pointer; display:block;
  }
  .obra .senal{
    display:block; margin-top:12px;
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--tinta-3); transition:color var(--medio) var(--asiento);
  }
  .obra .senal::after{content:"  +"; }
  .obra.abierta .senal{color:var(--petroleo-osc);}
  .obra.abierta .senal::after{content:"  \2013";}
  .obra h3{font-family:var(--display); font-weight:500; font-size:18px; margin:0 0 7px; letter-spacing:-0.02em;}
  .obra p{margin:0; font-size:clamp(14.5px,1.05vw,16px); color:var(--tinta-2);}

  /* detalle que se despliega: SOLO en la tarjeta que está bajo hover o fue clickeada */
  .obra-mas{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows 320ms var(--asiento), opacity 240ms var(--asiento), margin-top 320ms var(--asiento);
    margin-top:0;
  }
  .obra-mas > div{overflow:hidden;}
  .obra-mas dl{margin:0; display:grid; gap:8px; text-align:left;}
  .obra-mas .par{
    display:flex; justify-content:space-between; gap:12px;
    padding-top:8px; border-top:1px solid var(--borde);
    font-size:clamp(12.5px,.9vw,13.5px);
  }
  .obra-mas dt{font-family:var(--mono); font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--anil); white-space:nowrap;}
  .obra-mas dd{margin:0; color:var(--tinta-2); text-align:right;}
  .obra .abrir{
    font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--tinta-3); margin-top:14px; display:block;
    transition:color var(--medio) var(--asiento);
  }

  /* Al pasar ratón sobre esta tarjeta específica */
  @media (hover:hover){
    .obra:hover .obra-mas{grid-template-rows:1fr; opacity:1; margin-top:16px;}
    .obra:hover .abrir, .obra:hover .senal{color:var(--petroleo-osc);}
  }

  /* Al tocar esta tarjeta específica en móvil */
  .obra.abierta .obra-mas{grid-template-rows:1fr; opacity:1; margin-top:16px;}
  .obra.abierta .abrir{color:var(--petroleo-osc);}

  /* ---------- QUIÉN ---------- */
  .quien{text-align:center;}
  .quien p{font-size:clamp(16px,1.35vw,20px); color:var(--tinta-2); max-width:var(--lectura); margin:0 auto clamp(14px,1.4vw,20px);}
  .quien strong{color:var(--tinta); font-weight:500;}

  /* Los parrafos de Quienes somos van centrados y a ancho de lectura, como
     los bloques de su propia pagina: parrafo corto centrado se sostiene;
     a ancho completo quedaba descolgado del resto de la seccion. */
  .quien p{
    max-width:var(--lectura); margin-left:auto; margin-right:auto;
    text-align:center;
  }

  /* ---------- CONTACTO ---------- */
  .contacto{text-align:center; border-top:1px solid var(--borde); }
  .contacto .reclamo{
    font-family:var(--display); font-weight:500;
    font-size:clamp(25px, 4.8vw, 64px); letter-spacing:-0.038em;
    margin:0 auto clamp(16px,1.8vw,26px); max-width:18ch; line-height:1.08;
  }
  .contacto p{color:var(--tinta-2); max-width:46ch; margin:0 auto clamp(26px,2.6vw,38px); font-size:clamp(15.5px,1.2vw,18px);}
  .correo{
    display:inline-block; font-family:var(--mono); font-size:clamp(15px,1.4vw,21px);
    color:var(--tinta); text-decoration:none; border-bottom:1.5px solid var(--petroleo);
    padding-bottom:2px;
  }

  footer{padding:26px 0 40px; border-top:1px solid var(--borde); background:var(--cal);}
  footer .wrap{
    display:flex; justify-content:center; gap:8px 16px; flex-wrap:wrap;
    font-family:var(--mono); font-size:10.5px; color:var(--tinta-3); letter-spacing:.08em;
  }

  /* Enlaces del pie: heredan el gris del pie, no el petroleo de los
     enlaces del cuerpo, que en 10px cantaria demasiado. */
  footer .wrap a{color:inherit; text-decoration:none; border-bottom:1px solid var(--borde);}
  footer .wrap a:hover{color:var(--petroleo-osc); border-bottom-color:currentColor;}

  /* ---------- MOVIMIENTO ---------- */
  /* Un solo idioma: asentarse, no flotar. Curva única y tiempos cortos. */
  :root{ --asiento:cubic-bezier(.2,.8,.3,1); --rapido:150ms; --medio:240ms; }

  /* barra de progreso: un instrumento de precisión, no un adorno */
  .progreso{
    position:fixed; top:0; left:0; height:2px; z-index:60;
    background:var(--petroleo); width:0%;
    transition:width 90ms linear;
  }

  /* filas de capacidades: se asientan al acercarte */
  .cap{transition:background-color var(--medio) var(--asiento);}
  /* el triangulo da media vuelta y apunta al bloque que estas mirando */
  .cap .tri{transition:transform 320ms var(--asiento);}
  @media (hover:hover){
    .cap:hover{background:var(--hundida);}
    .cap:hover .tri{transform:rotate(180deg);}
  }
  /* En movil no hay raton: la fila se enciende sola al pasar por el centro
     de la pantalla (clase .enfoque, la pone el JS). El :active se queda
     como acuse de recibo al tocar. */
  .cap:active, .cap.enfoque{background:var(--hundida);}
  .cap:active .tri, .cap.enfoque .tri{transform:rotate(180deg);}

  /* fases: el número se abre y se enciende */
  .pasos li{transition:background-color var(--medio) var(--asiento);}
  @media (hover:hover){
    .pasos li:hover{background:var(--hundida);}
    .pasos li:hover .num-izq{transform:translateX(-12px);}
    .pasos li:hover .num-der{transform:translateX(12px);}
  }
  .pasos li.enfoque{background:var(--hundida);}
  .pasos li:active .num-izq, .pasos li.enfoque .num-izq{transform:translateX(-12px);}
  .pasos li:active .num-der, .pasos li.enfoque .num-der{transform:translateX(12px);}

  /* tarjetas: suben un paso, sin crecer */
  .obra{transition:transform var(--medio) var(--asiento), border-color var(--medio) var(--asiento), box-shadow var(--medio) var(--asiento);}
  @media (hover:hover){
    .obra:hover{transform:translateY(-3px); border-color:var(--borde-fuerte); box-shadow:0 10px 26px rgba(27,25,23,.07);}
  }
  .obra:active{transform:translateY(-1px);}

  /* botones: acuse de recibo al pulsar, que en el móvil es lo único que hay */
  .cta:active{transform:translateY(1px) scale(.985);}
  .cta{transition:transform var(--rapido) var(--asiento), background var(--rapido) ease, border-color var(--rapido) ease;}

  /* Al pasar por la marca bascula solo la cuña, no el punto.
     Si gira el SVG entero, el punto se despega y sale volando hacia un
     lado. Además, el punto quieto y la cuña moviéndose es lo que cuenta
     la historia: el peso no se mueve, lo que cede es el apoyo. */
  .cuna .asta{
    transition:transform var(--medio) var(--asiento);
    transform-origin:50% 100%; transform-box:fill-box;
  }
  @media (hover:hover){
    .marca:hover .cuna .asta{transform:rotate(-11deg);}
  }

  /* enlaces y correo: el subrayado crece desde el centro */
  .correo{position:relative; border-bottom-color:transparent;}
  .correo::after{
    content:""; position:absolute; left:50%; right:50%; bottom:0; height:1.5px;
    background:var(--petroleo); transition:left var(--medio) var(--asiento), right var(--medio) var(--asiento);
  }
  .correo::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:var(--borde-fuerte);
  }
  @media (hover:hover){ .correo:hover::after{left:0; right:0;} }

  /* interruptor de tema: el círculo gira media vuelta */
  .tema svg{transition:transform 420ms var(--asiento);}
  html[data-tema="oscuro"] .tema svg{transform:rotate(180deg);}

  /* ---------- REVELADO ---------- */
  /* El contenido es visible por defecto. Solo se oculta para animarlo si el
     JavaScript ha podido marcar <html class="js">. Si el JS falla o esta
     bloqueado, la web se lee entera, sin animacion pero completa. */
  html.js .rev{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);}
  html.js .rev.visible{opacity:1; transform:none;}




  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition-duration:.01ms !important;}
    html.js .rev{opacity:1; transform:none;}
    html{scroll-behavior:auto;}
  }


  /* ---------- CONTACTO: varias vias, no solo correo ---------- */
  .vias{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:clamp(20px,2vw,30px);}
  .via{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    font-family:var(--texto); font-size:clamp(14.5px,1.05vw,16.5px); font-weight:500;
    padding:clamp(12px,1vw,15px) clamp(20px,1.8vw,28px); border-radius:999px;
    border:1px solid var(--borde-fuerte); color:var(--tinta);
    transition:transform var(--rapido) var(--asiento), background var(--rapido) ease, border-color var(--rapido) ease;
  }
  .via:hover{background:var(--hundida); border-color:var(--tinta-3); transform:translateY(-1px);}
  .via:active{transform:translateY(1px) scale(.985);}
  .via.principal{background:var(--petroleo); border-color:transparent; color:#FCFAF5;}
  .via.principal:hover{background:var(--petroleo-osc);}
  .via svg{flex:none;}
  .zona{
    font-family:var(--mono); font-size:clamp(10.5px,.8vw,12px); letter-spacing:.14em;
    text-transform:uppercase; color:var(--tinta-3); margin-top:clamp(22px,2.4vw,34px);
  }

  /* ---------- FICHA DE PROYECTO ---------- */
  .volver{
    display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--tinta-2); text-decoration:none; margin-bottom:clamp(20px,2.4vw,34px);
  }
  .volver:hover{color:var(--petroleo-osc);}
  .ficha-cab{text-align:center; padding:clamp(30px,4vw,60px) 0 clamp(26px,3vw,44px);}
  .ficha-cab .tipo{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--anil); display:block; margin-bottom:12px;
  }
  .ficha-cab h1{font-size:clamp(30px,5.4vw,64px); max-width:20ch;}
  .ficha-cab .resumen{
    font-size:clamp(15.5px,1.4vw,20px); color:var(--tinta-2);
    max-width:58ch; margin:0 auto;
  }
  .bloque{padding:clamp(34px,4.4vw,64px) 0; border-top:1px solid var(--borde);}
  .bloque h2{
    font-family:var(--mono); font-size:clamp(10.5px,.82vw,12.5px); letter-spacing:.2em;
    text-transform:uppercase; color:var(--tinta-2); font-weight:400;
    margin:0 0 clamp(14px,1.6vw,22px); text-align:center;
  }
  .bloque h2 b{font-weight:500; color:var(--anil);}
  .bloque p{
    margin:0 auto clamp(12px,1.2vw,18px); max-width:var(--lectura);
    font-size:clamp(15px,1.15vw,17.5px); color:var(--tinta-2); text-align:center;
  }
  .bloque p:last-child{margin-bottom:0;}

  /* ---------- LOS DOS SOCIOS, EN PARALELO ----------
     Dos columnas de igual peso: la idea es que se lean a la vez y ninguno
     parezca el principal. Por debajo de 760px se apilan.
     El texto de las biografias va alineado a la izquierda aunque el resto de
     la pagina este centrado: un parrafo largo centrado obliga a buscar el
     comienzo de cada linea, y aqui hay parrafos de verdad. */
  .duo{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(26px,3.6vw,52px); align-items:stretch;
    max-width:920px; margin:0 auto;
  }
  .socio{
    display:flex; flex-direction:column;
    background:var(--tarjeta); border:1px solid var(--borde);
    border-radius:14px; padding:clamp(20px,2vw,28px);
  }
  .socio h3{
    font-family:var(--display); font-weight:500; line-height:1.18;
    font-size:clamp(18px,1.5vw,23px); letter-spacing:-.02em;
    margin:16px 0 4px; color:var(--tinta);
  }
  .socio .papel{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--petroleo); margin:0 0 14px; max-width:none;
  }
  .socio p{text-align:left; max-width:none; margin-left:0; margin-right:0;}
  .socio p:last-child{margin-bottom:0;}

  /* El retrato: si el archivo no esta, queda el circulo con la inicial, que
     el guion descubre al fallar la carga. Asi la pagina nunca ensena un icono
     de imagen rota mientras no haya fotos. */
  .retrato{
    position:relative; width:100%; max-width:180px; aspect-ratio:1;
    border-radius:50%; overflow:hidden; background:var(--hundida);
    border:1px solid var(--borde);
  }
  .retrato img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1;}
  .retrato .inicial{
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--display); font-weight:500; font-size:40px; letter-spacing:.02em;
    color:var(--petroleo); background:var(--petroleo-tenue);
  }
  @media (max-width:760px){
    .duo{grid-template-columns:1fr; gap:38px;}
    .retrato{max-width:150px;}
  }
  .datos{
    margin:0 auto; max-width:var(--lectura); display:grid; gap:0;
  }
  .datos .par{
    display:flex; justify-content:space-between; gap:16px; align-items:baseline;
    padding:11px 0; border-bottom:1px solid var(--borde);
  }
  .datos dt{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--anil); white-space:nowrap;
  }
  .datos dd{margin:0; color:var(--tinta-2); text-align:right; font-size:clamp(14.5px,1.05vw,16px);}
  .otras{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
  .otras a{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    text-decoration:none; color:var(--tinta-2);
    padding:9px 16px; border:1px solid var(--borde-fuerte); border-radius:999px;
  }
  .otras a:hover{color:var(--petroleo-osc); border-color:var(--tinta-3); background:var(--hundida);}

  /* ---------- BIBLIOTECA DE PROYECTOS ---------- */
  .filtros{
    border-top:1px solid var(--borde); border-bottom:1px solid var(--borde);
    padding:clamp(16px,2vw,26px) 0; margin:clamp(20px,2.6vw,38px) 0 clamp(22px,2.8vw,40px);
    display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,34px); align-items:flex-start;
  }
  .grupo-filtro{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
  .et-filtro{
    font-family:var(--mono); font-size:12px; letter-spacing:.06em;
    color:var(--anil); white-space:nowrap;
  }
  .chips{display:flex; flex-wrap:wrap; gap:7px;}
  .chip{
    font-family:var(--texto); font-size:13.5px; line-height:1;
    padding:8px 13px; border-radius:999px; cursor:pointer;
    background:transparent; color:var(--tinta-2);
    border:1px solid var(--borde-fuerte);
    transition:background-color .16s ease, color .16s ease, border-color .16s ease;
  }
  .chip:hover{border-color:var(--petroleo); color:var(--petroleo);}
  .chip[aria-pressed="true"]{
    background:var(--petroleo); border-color:var(--petroleo); color:var(--tarjeta);
  }
  .cuenta{
    font-family:var(--mono); font-size:12px; color:var(--tinta-3);
    margin:0; align-self:center; margin-left:auto;
  }

  .biblio{
    display:grid; gap:clamp(12px,1.4vw,20px);
    grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
  }
  .libro{
    display:flex; flex-direction:column; text-decoration:none;
    background:var(--tarjeta); border:1px solid var(--borde); border-radius:14px;
    padding:clamp(18px,1.9vw,26px);
    transition:border-color .18s ease, transform .18s ease;
  }
  .libro:hover{border-color:var(--petroleo); transform:translateY(-2px);}
  .libro-tipo{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.05em;
    color:var(--anil); margin-bottom:9px;
  }
  .libro h2{
    font-family:var(--display); font-weight:500; letter-spacing:-0.025em;
    font-size:clamp(19px,1.6vw,24px); margin:0 0 8px; color:var(--tinta);
  }
  .libro p{font-size:15px; color:var(--tinta-2); margin:0 0 14px; flex:1;}
  .libro .marcas{margin-bottom:14px;}
  .libro-pie{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    font-family:var(--mono); font-size:11.5px; color:var(--tinta-3);
    border-top:1px solid var(--borde); padding-top:12px;
  }
  .libro-pie .senal{color:var(--petroleo-osc); white-space:nowrap;}
  .vacio{text-align:center; color:var(--tinta-2); padding:clamp(30px,5vw,70px) 0;}
  .limpiar{
    background:none; border:0; padding:0; cursor:pointer;
    color:var(--petroleo-osc); font:inherit; text-decoration:underline;
  }
  @media (max-width:560px){
    .cuenta{margin-left:0; width:100%;}
  }


  /* ---------- CIFRAS DE LA PORTADA ---------- */
  /* Flex y no grid, a proposito. Con una rejilla de dos columnas, tres cifras
     dejan una huerfana pegada a la izquierda; con flex y justify-content
     centrada, la fila incompleta se centra sola. De paso, en escritorio las
     tres se agrupan en vez de repartirse todo el ancho. */
  .cifras{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
    gap:24px clamp(34px, 7vw, 96px); text-align:center;
  }
  .cifra{display:flex; flex-direction:column; gap:6px; flex:0 1 auto; min-width:120px;}
  .cifra-n{
    font-family:var(--mono); font-weight:500; font-size:32px; line-height:1;
    color:var(--petroleo); font-variant-numeric:tabular-nums;
  }
  .cifra-et{font-size:13px; color:var(--tinta-2); line-height:1.35;}
  /* Las cifras y el boton son un bloque y cierran la seccion de Proyectos;
     la frontera con Quienes somos la marca la seccion siguiente con su
     rotulo, igual que entre el resto de secciones de la portada. */
  .ir-biblio{text-align:center; margin:clamp(22px,2.6vw,34px) 0 0;}
  /* Un solo bloque de reglas para los dos botones de seccion, para que no
     puedan separarse el dia que se retoque uno. */
  .ir-biblio .cta, .ir-quienes .cta{
    display:inline-flex; align-items:center; gap:9px;
    padding:14px 26px; border-radius:8px;
    background:var(--petroleo); color:#FCFAF5; border:1px solid transparent;
  }
  .ir-biblio .cta:hover, .ir-quienes .cta:hover{background:var(--petroleo-osc);}
  html[data-tema="oscuro"] .ir-biblio .cta,
  html[data-tema="oscuro"] .ir-quienes .cta{color:#101619;}

  /* ---------- NAVEGACION ----------
     Sin JavaScript los enlaces se ven siempre y el boton se esconde: si el
     guion falla, la navegacion sigue funcionando en vez de quedar un boton
     muerto. Con JS, por debajo del punto de corte se pliega en el boton. */
  .nav{margin-left:auto; margin-right:clamp(12px,1.6vw,24px);}
  .nav-boton{display:none;}
  .nav-menu{
    list-style:none; display:flex; gap:clamp(14px,1.7vw,28px);
    margin:0; padding:0;
  }
  .nav-menu a{
    font-family:var(--texto); font-size:clamp(13.5px,1vw,15px); font-weight:500;
    text-decoration:none; color:var(--tinta-2); white-space:nowrap;
    padding:6px 0; border-bottom:2px solid transparent;
    transition:color .16s ease, border-color .16s ease;
  }
  .nav-menu a:hover, .nav-menu a:focus-visible{color:var(--petroleo); border-color:var(--petroleo);}
  .nav-menu a[aria-current="page"]{color:var(--tinta); border-color:var(--petroleo);}

  /* --- plegado: el boton y el panel --- */
  html.js .nav-boton{
    display:inline-flex; align-items:center; gap:9px;
    background:transparent; border:1px solid var(--borde-fuerte);
    border-radius:8px; padding:8px 13px; cursor:pointer;
    font-family:var(--mono); font-size:12px; letter-spacing:.05em;
    color:var(--tinta-2);
    transition:border-color .16s ease, color .16s ease;
  }
  html.js .nav-boton:hover{border-color:var(--petroleo); color:var(--petroleo);}
  .nav-rayas, .nav-rayas::before, .nav-rayas::after{
    display:block; width:15px; height:1.5px; background:currentColor;
    transition:transform .22s var(--asiento), opacity .16s ease;
  }
  .nav-rayas{position:relative;}
  .nav-rayas::before, .nav-rayas::after{content:""; position:absolute; left:0;}
  .nav-rayas::before{top:-5px;} .nav-rayas::after{top:5px;}
  .nav-boton[aria-expanded="true"] .nav-rayas{background:transparent;}
  .nav-boton[aria-expanded="true"] .nav-rayas::before{top:0; transform:rotate(45deg);}
  .nav-boton[aria-expanded="true"] .nav-rayas::after{top:0; transform:rotate(-45deg);}

  /* En movil el menu es un cajon lateral: entra deslizandose desde el borde
     derecho, que es donde esta el boton, y se repliega hacia ese mismo lado.
     Va por DEBAJO de la cabecera a proposito (z-index 35 contra 40): asi el
     boton no queda tapado y sirve tambien para cerrar, sin necesidad de una
     segunda aspa dentro del panel. El desplazamiento superior sale de
     --alto-cab, que mide el guion en vivo: la cabecera cambia de alto segun el
     ancho y un 63px fijo se desajustaba.
     La sombra no asoma con el cajon cerrado porque visibility:hidden deja de
     pintar el elemento entero; por eso se anima visibility junto al transform,
     y no opacity. */
  html.js .nav-boton{position:relative; z-index:45;}
  html.js .nav-menu{
    position:fixed; top:var(--alto-cab, 63px); right:0; bottom:0; z-index:35;
    width:min(82vw, 320px);
    flex-direction:column; gap:2px; align-items:stretch;
    background:var(--tarjeta); border-left:1px solid var(--borde);
    border-top:1px solid var(--borde);
    padding:14px 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
    box-shadow:-16px 0 38px rgba(0,0,0,.13);
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); visibility:hidden;
    transition:transform .34s var(--asiento), visibility .34s;
  }
  html.js .nav-menu.abierto{transform:translateX(0); visibility:visible;}
  html.js .nav-menu a{
    display:block; padding:13px 14px; border-radius:8px;
    border-bottom:0; font-size:16px;
  }
  html.js .nav-menu a:hover{background:var(--hundida); color:var(--petroleo);}
  html.js .nav-menu a[aria-current="page"]{background:var(--hundida); color:var(--tinta);}

  /* El velo lo crea el guion, para no tener que tocar el HTML de las 7 paginas. */
  .nav-velo{
    position:fixed; top:var(--alto-cab, 63px); right:0; bottom:0; left:0; z-index:30;
    background:rgba(19,33,38,.34);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s;
  }
  .nav-velo.visible{opacity:1; visibility:visible;}
  html[data-tema="oscuro"] .nav-velo{background:rgba(0,0,0,.52);}
  html.js body.nav-abierta{overflow:hidden;}

  @media (prefers-reduced-motion: reduce){
    html.js .nav-menu{transition:visibility .01s;}
    .nav-velo{transition:visibility .01s;}
  }

  /* --- variante A: en escritorio los enlaces vuelven a la barra --- */
  @media (min-width:880px){
    html.js .nav-boton{display:none;}
    html.js .nav-menu{
      position:static; inset:auto; width:auto;
      flex-direction:row; align-items:center; gap:clamp(14px,1.7vw,28px);
      background:none; border-left:0; border-radius:0; padding:0;
      box-shadow:none; overflow:visible;
      transform:none; visibility:visible;
    }
    html.js .nav-menu a{
      display:inline; padding:6px 0; border-radius:0; background:none;
      border-bottom:2px solid transparent; font-size:clamp(13.5px,1vw,15px);
    }
    html.js .nav-menu a:hover{background:none;}
    html.js .nav-menu a[aria-current="page"]{background:none;}
    .nav-velo{display:none;}
  }
  @media (max-width:520px){
    .nav-texto{display:none;}
    .lugar{display:none;}
  }

  .ir-quienes{text-align:center; margin:clamp(26px,3.2vw,40px) 0 0;}