/* ============================================
     TOKENS — sistema de diseño del sitio completo
     ============================================ */
  :root{
    color-scheme: light only;
    --bg:            #FDFDFC;
    --ink:           #16161A;
    --ink-soft:      #555555;      /* 7.32:1 contra --bg: cruza AAA */
    --ink-faint:     #A8A6A0;
    --accent:        #3E8F5C;      /* verde badge de estado */
    --accent-soft:   #E7F0EA;
    --cta:           #111111;
    --cta-text:      #FDFDFC;
    --line:          #E7E5E0;
    --photo-1:       #D8D5CE;
    --photo-2:       #C7C2B8;
    --photo-3:       #B8AFA0;

    --font-display:  'Plus Jakarta Sans', sans-serif;
    --font-body:     'Inter', sans-serif;

    --container:     1180px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{
    scroll-behavior:smooth;
    width:100%;
    overflow-x:hidden;
  }

  body{
    width:100%;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    /* overflow-x:hidden obliga al navegador a calcular overflow-y como auto,
       asi que el body recorta lo que se sale de su caja. En una pagina corta
       eso cortaba el panel del menu por abajo. Con el alto minimo del
       viewport siempre hay sitio. En el home no cambia nada: ya mide mas. */
    min-height:100vh;
  }

  a{ color:inherit; text-decoration:none; }

  picture{ display:contents; }

  /* CSS defensivo: por defecto un item flex/grid no baja de su ancho
     min-content y desborda el contenedor en movil. */
  .impact-section > *,
  .why-grid > *,
  .speaker-grid > *,
  .portfolio-grid > *,
  .portfolio-card,
  .portfolio-card-body,
  .talks-grid > *,
  .social-grid > *,
  .social-card,
  .social-info,
  .origin-card,
  .founders-hero > *,
  .founders-dolores-grid > *,
  .founders-propuesta-grid > *,
  .founders-logro > *,
  .founders-modulo summary > *,
  .founders-faq-item summary > *,
  .founders-historia-grid > *,
  .founders-plan-item > *,
  .casos-empresa-bloque > *,
  .et-caminos-grid > *,
  .etb-productos > *,
  .et-portafolio > *,
  .footer-inner > *{
    min-width:0;
  }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
  }

  /* ============================================
     NAV
     ============================================ */
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:32px 40px;
    max-width:var(--container);
    margin:0 auto;
  }

  .nav-mark{
    width:40px;
    height:40px;
    border-radius:50%;
    border:1.5px solid var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    letter-spacing:-0.02em;
  }

  .nav-menu{
    position:relative;
  }

  .nav-right{
    display:flex;
    align-items:center;
    gap:14px;
  }

  .lang-switch{
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }

  .lang-btn{
    appearance:none;
    border:none;
    background:transparent;
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    padding:7px 13px;
    border-radius:999px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }

  .lang-btn:hover{
    color:var(--ink);
  }

  /* ---- Paginas legales: /privacidad/ y /en/privacy/ ----
     Documento de texto, no una landing. Sin hero, sin CTA, sin gradientes.
     La columna se mide en ch para clavar el rango de lectura comodo: 68ch
     cae dentro de los 65-75 caracteres por linea con la tipografia del sitio.

     Los h2 van alineados a la izquierda, como el cuerpo. No hace falta
     ninguna excepcion: el centrado de h2 no es una regla global del sitio,
     solo lo hacen .et-h2 y las clases propias de /founders/. */
  .legal{
    max-width:68ch;
    margin-inline:auto;
    padding:0 20px 96px;
  }

  .legal-rotulo{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 10px;
  }

  .legal h1{
    font-family:var(--font-display);
    font-size:clamp(30px, 3.4vw, 42px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin:0 0 14px;
    text-align:left;
  }

  .legal-fecha{
    font-size:14px;
    color:var(--ink-soft);
    margin:0 0 40px;
  }

  .legal h2{
    font-family:var(--font-display);
    font-size:clamp(20px, 2.1vw, 24px);
    font-weight:700;
    line-height:1.25;
    letter-spacing:-0.01em;
    color:var(--ink);
    /* A la izquierda, como el cuerpo: es texto legal en columna. */
    text-align:left;
    margin:40px 0 12px;
  }

  .legal p,
  .legal li{
    font-size:16.5px;
    line-height:1.7;
    /* Cuerpo en --ink. Nunca --ink-faint: esto hay que poder leerlo entero. */
    color:var(--ink);
    margin:0 0 16px;
  }

  .legal ul,
  .legal ol{
    margin:0 0 16px;
    padding-left:22px;
  }

  .legal li{ margin-bottom:8px; }

  .legal strong{ font-weight:700; color:var(--ink); }

  .legal a{
    color:var(--ink);
    text-underline-offset:3px;
  }

  .legal a:hover{ color:var(--accent); }

  .legal a:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:3px;
  }

  @media (max-width:640px){
    .legal{ padding:0 20px 72px; }
    .legal p,
    .legal li{ font-size:16px; }
    .legal h2{ margin-top:32px; }
  }

  /* ---- Banner de cookies ----
     Barra inferior fija. position:fixed a proposito: no participa del flujo,
     asi que no empuja contenido ni provoca layout shift. Sin overlay: la
     pagina sigue siendo usable con el banner abierto. */
  .cookie-barra{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    background:var(--bg);
    border-top:1px solid var(--line);
  }

  .cookie-caja{
    width:100%;
    max-width:var(--container);
    margin-inline:auto;
    padding:18px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-width:0;
  }

  .cookie-texto{
    margin:0;
    font-size:14.5px;
    line-height:1.5;
    /* --ink-soft, nunca --ink-faint: esto hay que leerlo para decidir. */
    color:var(--ink-soft);
    min-width:0;
  }

  .cookie-acciones{
    display:flex;
    gap:10px;
    flex-shrink:0;
  }

  /* Los dos botones comparten TODA la caja: mismo padding, mismo tamano de
     letra, mismo peso y mismo radio. Lo unico que cambia es el relleno.
     El de rechazar compensa su borde de 1.5px en el padding para que la caja
     exterior mida exactamente igual que la del de aceptar. */
  .cookie-boton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* Misma caja exacta en los dos, no solo el mismo estilo. Sin esto,
       "Rechazar" mide mas que "Aceptar" solo porque la palabra es mas larga,
       y el requisito es que las dos opciones se vean igual de disponibles. */
    min-width:128px;
    border-radius:999px;
    font-family:var(--font-body);
    font-size:14.5px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease, color .2s ease;
  }

  .cookie-boton--aceptar{
    background:var(--cta);
    color:var(--cta-text);
    border:1.5px solid var(--cta);
    padding:13px 26px;
  }

  .cookie-boton--rechazar{
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--ink);
    padding:13px 26px;
  }

  .cookie-boton:hover{ transform:translateY(-2px); }
  .cookie-boton--rechazar:hover{ background:var(--ink); color:var(--cta-text); }

  .cookie-boton:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:3px;
  }

  .cookie-enlace{
    color:var(--ink);
    text-underline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    .cookie-boton{ transition:none; }
    .cookie-boton:hover{ transform:none; }
  }

  @media (max-width:880px){
    .cookie-caja{ padding:16px 20px; }
  }

  @media (max-width:640px){
    .cookie-caja{
      flex-direction:column;
      align-items:stretch;
      gap:14px;
    }
    .cookie-acciones{ gap:10px; }
    .cookie-boton{ flex:1 1 0; }
  }

  /* El toggle de idioma son enlaces reales a la pagina equivalente, no
     botones que traducen en el sitio. Se conserva aria-pressed por si
     queda markup viejo en cache; el estado real lo marca aria-current. */
  .lang-btn[aria-pressed="true"],
  .lang-btn[aria-current]{
    background:var(--ink);
    color:var(--cta-text);
  }

  a.lang-btn{
    text-decoration:none;
    display:inline-block;
    line-height:1;
  }

  .nav-menu summary{
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 20px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:border-color .2s ease;
    list-style:none;
  }
  .nav-menu summary::-webkit-details-marker{ display:none; }
  .nav-menu summary:hover{ border-color:var(--ink-faint); }
  .nav-menu[open] summary{ border-color:var(--ink); }

  .nav-menu svg{ width:14px; height:14px; }

  .nav-menu-panel{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:20;
    display:flex;
    flex-direction:column;
    min-width:220px;
    background:#FFFFFF;
    border:1px solid var(--line);
    border-radius:16px;
    padding:10px;
    box-shadow:0 20px 44px rgba(20,20,15,0.14);
    opacity:0;
    transform:translateY(-6px);
    animation:navPanelIn .18s ease forwards;
  }

  @keyframes navPanelIn{
    to{ opacity:1; transform:translateY(0); }
  }

  .nav-menu-panel a{
    padding:11px 14px;
    border-radius:10px;
    font-size:14px;
    font-weight:500;
    color:var(--ink-soft);
    transition:background .15s ease, color .15s ease;
  }

  .nav-menu-panel a:hover{
    background:var(--accent-soft);
    color:var(--ink);
  }

  /* pagina en la que estas: mismo tono que el hover pero sin fondo,
     para que se distinga del elemento que el cursor esta tocando */
  .nav-menu-panel a.is-active{
    color:var(--ink);
    font-weight:600;
  }

  /* ============================================
     COVER HERO — nombre gigante detrás, foto sobresaliendo
     ============================================ */
  .cover-hero{
    position:relative;
    padding-top:10px;
    padding-bottom:20px;
  }

  .cover-badge-row{
    display:flex;
    justify-content:center;
    margin-bottom:8px;
    opacity:0;
    animation:riseIn .7s ease forwards;
  }

  .badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 16px 8px 14px;
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
  }

  .badge-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .cover-stage{
    position:relative;
    max-width:1180px;
    margin:0 auto;
    height:460px;
  }

  .cover-name{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100vw;
    overflow:hidden;
    text-align:left;
    user-select:none;
    pointer-events:none;
  }
  .cover-name-text{
    display:inline-block;
    white-space:nowrap;
    font-family:var(--font-display);
    font-weight:800;
    font-size:200px;
    line-height:1;
    letter-spacing:-0.02em;
    background:linear-gradient(180deg, var(--ink) 0%, var(--ink) 40%, rgba(22,22,26,0.05) 94%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    transform-origin:left center;
    will-change:transform;
  }

  .cover-photo-wrap{
    /* --tx centra la foto respecto a left:50% en desktop. Los keyframes de
       photoIn la leen en vez de repetir el -50% a mano: así, cuando el layout
       deja de ser absoluto (<=880px) basta con ponerla en 0 y la animación
       deja de arrastrar la foto fuera de su caja. */
    --tx:-50%;
    position:absolute;
    left:50%;
    bottom:-30px;
    transform:translateX(var(--tx));
    z-index:2;
    width:380px;
    max-width:64vw;
    opacity:0;
    animation:photoIn 1s cubic-bezier(.2,.8,.2,1) .2s forwards;
  }

  .cover-photo{
    width:100%;
    aspect-ratio:700/638;
    -webkit-mask-image:linear-gradient(to bottom, black 88%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 88%, transparent 100%);
    position:relative;
    overflow:hidden;
  }

  .cover-photo-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
  }

  .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--cta);
    color:var(--cta-text);
    border:none;
    border-radius:999px;
    padding:15px 26px;
    font-size:14.5px;
    font-weight:600;
    font-family:var(--font-body);
    cursor:pointer;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(17,17,17,0.22);
  }
  .btn-primary svg{ width:14px; height:14px; }

  @keyframes photoIn{
    from{ opacity:0; transform:translateX(var(--tx)) translateY(30px); }
    to{ opacity:1; transform:translateX(var(--tx)) translateY(0); }
  }

  @keyframes nameRiseIn{
    from{ opacity:0; transform:translate(-50%, calc(-50% + 14px)); }
    to{ opacity:1; transform:translate(-50%, -50%); }
  }

  @keyframes riseIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* responsive */
  @media (max-width: 880px){
    .cover-stage{
      height:auto;
      padding:0 20px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:20px;
    }
    .cover-name{
      position:relative;
      top:auto; left:auto;
      width:100%;
      order:1;
      animation:none;
      opacity:1;
      transform:none;
    }
    .cover-photo-wrap{
      /* apilada y centrada por el flex del stage: sin -50% que corregir */
      --tx:0px;
      position:relative; inset:auto; bottom:auto; left:auto;
      order:2; width:280px; max-width:80vw; margin:0 auto;
    }
    .nav{ padding:24px 20px; }
    .nav-right{ gap:8px; }
    .lang-btn{ padding:6px 10px; font-size:12px; }
    .nav-menu summary{ padding:9px 14px; font-size:13px; }
  }

  @media (prefers-reduced-motion: reduce){
    .cover-badge-row{
      animation:none !important; opacity:1 !important;
    }
    .cover-name{
      animation:none !important; opacity:1 !important; transform:translate(-50%,-50%) !important;
    }
    .cover-photo-wrap{
      animation:none !important; opacity:1 !important; transform:translateX(var(--tx)) !important;
    }
  }

  /* ============================================
     SCROLL INDICATOR
     ============================================ */
  .scroll-indicator{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:0 auto;
    border-radius:50%;
    border:1.5px solid var(--ink);
    color:var(--ink);
    background:var(--bg);
    cursor:pointer;
    animation:bob 2.2s ease-in-out infinite;
    transition:transform .2s ease, background .2s ease;
  }
  .scroll-indicator:hover{
    background:var(--ink);
    color:var(--bg);
  }
  .scroll-indicator svg{ width:16px; height:16px; }

  @keyframes bob{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(6px); }
  }

  /* ============================================
     IMPACT SECTION — título, subtítulo, tarjetas rotando
     ============================================ */
  .impact-section{
    padding:60px 40px 60px;
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }

  .impact-left{
    max-width:480px;
  }

  .impact-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(34px, 3.6vw, 46px);
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:22px;
  }

  .impact-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  .impact-right{
    position:relative;
    height:560px;
    overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 55%, transparent 100%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, black 55%, transparent 100%);
  }

  .impact-orbit{
    position:absolute;
    top:190px;
    right:200px;
    width:0;
    height:0;
    animation:cardOrbit 40s linear infinite;
  }

  .impact-card{
    position:absolute;
    width:216px;
    height:152px;
    margin-left:-108px;
    margin-top:-76px;
    border-radius:14px;
    overflow:hidden;
    background:#FFFFFF;
    box-shadow:0 20px 40px rgba(20,20,15,0.14);
  }

  .impact-card img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  /* cada tarjeta tiene su propia inclinación fija y su propio desfase de tiempo,
     para que las 16 queden repartidas alrededor del círculo, como cabinas de
     una rueda de la fortuna */
  .impact-orbit.c1 { animation-delay:0s;      }
  .impact-orbit.c2 { animation-delay:-2.5s;  }
  .impact-orbit.c3 { animation-delay:-5s;   }
  .impact-orbit.c4 { animation-delay:-7.5s;  }
  .impact-orbit.c5 { animation-delay:-10s;     }
  .impact-orbit.c6 { animation-delay:-12.5s;  }
  .impact-orbit.c7 { animation-delay:-15s;  }
  .impact-orbit.c8 { animation-delay:-17.5s; }
  .impact-orbit.c9 { animation-delay:-20s;    }
  .impact-orbit.c10{ animation-delay:-22.5s; }
  .impact-orbit.c11{ animation-delay:-25s;  }
  .impact-orbit.c12{ animation-delay:-27.5s; }
  .impact-orbit.c13{ animation-delay:-30s;    }
  .impact-orbit.c14{ animation-delay:-32.5s; }
  .impact-orbit.c15{ animation-delay:-35s;  }
  .impact-orbit.c16{ animation-delay:-37.5s; }

  .impact-orbit.c1  .impact-card{ transform:rotate(-6deg); }
  .impact-orbit.c2  .impact-card{ transform:rotate(-4deg); }
  .impact-orbit.c3  .impact-card{ transform:rotate(-7deg); }
  .impact-orbit.c4  .impact-card{ transform:rotate(-3deg); }
  .impact-orbit.c5  .impact-card{ transform:rotate(-5deg); }
  .impact-orbit.c6  .impact-card{ transform:rotate(-6deg); }
  .impact-orbit.c7  .impact-card{ transform:rotate(-4deg); }
  .impact-orbit.c8  .impact-card{ transform:rotate(-7deg); }
  .impact-orbit.c9  .impact-card{ transform:rotate(-3deg); }
  .impact-orbit.c10 .impact-card{ transform:rotate(-5deg); }
  .impact-orbit.c11 .impact-card{ transform:rotate(-6deg); }
  .impact-orbit.c12 .impact-card{ transform:rotate(-4deg); }
  .impact-orbit.c13 .impact-card{ transform:rotate(-7deg); }
  .impact-orbit.c14 .impact-card{ transform:rotate(-3deg); }
  .impact-orbit.c15 .impact-card{ transform:rotate(-5deg); }
  .impact-orbit.c16 .impact-card{ transform:rotate(-6deg); }

  /* órbita elíptica alrededor de un centro común — radio más amplio, más separación entre tarjetas */
  @keyframes cardOrbit{
    0%    { transform:translate(230px, 0px);     }
    12.5% { transform:translate(163px, 219px);    }
    25%   { transform:translate(0px, 310px);     }
    37.5% { transform:translate(-163px, 219px);   }
    50%   { transform:translate(-230px, 0px);    }
    62.5% { transform:translate(-163px, -219px);  }
    75%   { transform:translate(0px, -310px);    }
    87.5% { transform:translate(163px, -219px);   }
    100%  { transform:translate(230px, 0px);     }
  }

  @media (max-width: 880px){
    .impact-section{
      grid-template-columns:1fr;
      padding:40px 20px 50px;
      gap:40px;
    }
    .impact-left{ max-width:100%; }
    .impact-right{ height:380px; }
    .impact-orbit{ top:150px; right:150px; animation-duration:40s; }
    .impact-card{ width:152px; height:108px; margin-left:-76px; margin-top:-54px; }
    @keyframes cardOrbit{
      0%    { transform:translate(155px, 0px);     }
      12.5% { transform:translate(110px, 145px);    }
      25%   { transform:translate(0px, 205px);     }
      37.5% { transform:translate(-110px, 145px);   }
      50%   { transform:translate(-155px, 0px);    }
      62.5% { transform:translate(-110px, -145px);  }
      75%   { transform:translate(0px, -205px);    }
      87.5% { transform:translate(110px, -145px);   }
      100%  { transform:translate(155px, 0px);     }
    }
  }

  @media (prefers-reduced-motion: reduce){
    .scroll-indicator{ animation:none !important; }
    .impact-orbit{ animation:none !important; }
  }

  /* ============================================
     WHY SECTION — "01 — Por qué lo hago"
     ============================================ */
  .why-section{
    padding:60px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .why-grid{
    display:grid;
    grid-template-columns:0.92fr 1fr;
    gap:72px;
    align-items:center;
  }

  .why-image{
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:4/5;
    box-shadow:0 30px 60px rgba(20,20,15,0.12);
    max-width:75%;
  }

  .why-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .why-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-bottom:22px;
  }

  .why-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .why-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(32px, 3.2vw, 44px);
    line-height:1.12;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:28px;
  }

  .why-subtitle{
    font-size:19px;
    font-weight:600;
    line-height:1.5;
    color:var(--ink);
    margin-bottom:22px;
  }

  .why-body{
    font-size:16px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:16px;
  }

  .why-body:last-of-type{
    margin-bottom:0;
  }

  .why-formula{
    margin-top:32px;
    padding:22px 26px;
    border-radius:14px;
    background:rgba(62,143,92,0.07);
    border:1px solid rgba(62,143,92,0.2);
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(15px, 1.7vw, 18px);
    color:var(--ink);
    display:inline-block;
  }

  .why-formula .op{
    color:var(--accent);
    padding:0 2px;
  }

  .why-formula .result{
    color:var(--accent);
  }

  @media (max-width: 880px){
    .why-section{
      padding:50px 20px 40px;
    }
    .why-grid{
      grid-template-columns:1fr;
      gap:36px;
    }
    .why-image{
      aspect-ratio:4/3;
      max-width:100%;
    }
    .why-title{
      font-size:clamp(28px, 7vw, 36px);
    }
    .why-subtitle{
      font-size:17px;
    }
  }

  /* ============================================
     PORTFOLIO SECTION — "02 — Mi Portafolio"
     ============================================ */
  .portfolio-section{
    padding:30px 40px 140px;
    max-width:var(--container);
    margin:0 auto;
  }

  .portfolio-header{
    max-width:600px;
    margin-bottom:56px;
  }

  .portfolio-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-bottom:22px;
  }

  .portfolio-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .portfolio-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
  }

  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px;
  }

  .portfolio-card{
    display:flex;
    flex-direction:column;
    border-radius:18px;
    overflow:hidden;
    background:#FFFFFF;
    box-shadow:0 16px 40px rgba(20,20,15,0.08);
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .portfolio-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 52px rgba(20,20,15,0.13);
  }

  .portfolio-card-img{
    width:100%;
    aspect-ratio:10/7;
    overflow:hidden;
    background:#F0EFEA;
  }

  .portfolio-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .portfolio-card-body{
    padding:24px 24px 26px;
    display:flex;
    flex-direction:column;
    flex:1;
  }

  .portfolio-tag{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:10px;
  }

  .portfolio-name{
    font-family:var(--font-display);
    font-weight:800;
    font-size:22px;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:10px;
  }

  .portfolio-desc{
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink-soft);
    margin-bottom:18px;
    flex:1;
  }

  .portfolio-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
  }

  .portfolio-link svg{
    width:14px;
    height:14px;
    transition:transform .2s ease;
  }

  .portfolio-card:hover .portfolio-link svg{
    transform:translateX(3px);
  }

  /* last card (5th) centered nicely in the second row on a 3-col grid */
  .portfolio-card.wide{
    grid-column:span 1;
  }

  @media (max-width:1000px){
    .portfolio-grid{
      grid-template-columns:repeat(2, 1fr);
    }
  }

  @media (max-width:640px){
    .portfolio-section{
      padding:25px 20px 90px;
    }
    .portfolio-grid{
      grid-template-columns:1fr;
      gap:24px;
    }
    .portfolio-header{
      margin-bottom:36px;
    }
  }

  /* ============================================
     ORIGIN SECTION — "03 — El origen" (línea de tiempo horizontal)
     ============================================ */
  .origin-section{
    padding:60px 0 70px;
    overflow:hidden;
  }

  .origin-header{
    max-width:var(--container);
    margin:0 auto 40px;
    padding:0 40px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }

  .origin-header-text{
    max-width:600px;
  }

  .origin-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-bottom:22px;
  }

  .origin-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .origin-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:16px;
  }

  .origin-subtitle{
    font-size:16px;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .origin-nav{
    display:flex;
    gap:10px;
    flex-shrink:0;
  }

  .origin-nav button{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1.5px solid var(--ink);
    background:var(--bg);
    color:var(--ink);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, color .2s ease;
  }

  .origin-nav button:hover{
    background:var(--ink);
    color:var(--bg);
  }

  .origin-nav button svg{
    width:18px;
    height:18px;
  }

  .origin-track-wrap{
    position:relative;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:6px;
  }

  .origin-track-wrap::-webkit-scrollbar{
    display:none;
  }

  .origin-track-wrap::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:70px;
    background:linear-gradient(to right, transparent, var(--bg));
    pointer-events:none;
  }

  .origin-track{
    position:relative;
    display:flex;
    gap:28px;
    padding:0 40px 20px;
    width:max-content;
  }

  .origin-line{
    position:absolute;
    left:40px;
    right:40px;
    top:50px;
    height:2px;
    background:rgba(22,22,26,0.1);
  }

  .origin-item{
    flex:0 0 300px;
    width:300px;
  }

  .origin-year{
    font-family:var(--font-display);
    font-weight:800;
    font-size:26px;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:14px;
  }

  .origin-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 5px var(--bg);
    position:relative;
    z-index:2;
    margin-bottom:22px;
  }

  .origin-card{
    background:#FFFFFF;
    border-radius:16px;
    padding:20px 20px 22px;
    box-shadow:0 12px 32px rgba(20,20,15,0.07);
  }

  .origin-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16.5px;
    line-height:1.3;
    color:var(--ink);
    margin-bottom:10px;
  }

  .origin-card p{
    font-size:13.5px;
    line-height:1.6;
    color:var(--ink-soft);
    margin-bottom:14px;
  }

  .origin-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .origin-tag{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.02em;
    padding:5px 10px;
    border-radius:20px;
    background:rgba(62,143,92,0.08);
    color:var(--accent);
    white-space:nowrap;
  }

  .origin-hint{
    display:none;
    max-width:var(--container);
    margin:14px auto 0;
    padding:0 40px;
    font-size:12.5px;
    color:var(--ink-soft);
  }

  @media (max-width:880px){
    .origin-nav{ display:none; }
    .origin-hint{ display:block; }
    .origin-header{ padding:0 20px; }
    .origin-track{ padding:0 20px 20px; gap:20px; }
    .origin-line{ left:20px; right:20px; }
    .origin-item{ flex:0 0 250px; width:250px; }
    .origin-year{ font-size:22px; }
  }

  /* ============================================
     LOGOS BANNER — "Respaldado y cubierto por"
     ============================================ */
  .logos-section{
    padding:32px 0 64px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .logos-label{
    text-align:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:38px;
  }

  .logos-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:40px 56px;
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
  }

  .logo-item{
    color:var(--ink-faint);
    opacity:0.9;
    transition:opacity .2s ease, color .2s ease;
    line-height:1;
    white-space:nowrap;
  }

  .logo-item:hover{
    color:var(--ink-soft);
    opacity:1;
  }

  .logo-serif-italic{
    font-family:Georgia, 'Times New Roman', serif;
    font-style:italic;
    font-weight:700;
    font-size:23px;
  }

  .logo-serif{
    font-family:Georgia, 'Times New Roman', serif;
    font-size:24px;
    letter-spacing:0.01em;
  }

  .logo-caps{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }

  @media (max-width:880px){
    .logos-section{ padding:24px 0 48px; }
    .logos-row{ gap:28px 32px; padding:0 20px; }
    .logo-serif-italic{ font-size:19px; }
    .logo-serif{ font-size:20px; }
    .logo-caps{ font-size:12px; }
  }

  /* ============================================
     CONTENT SECTION — "04 — Contenido de impacto"
     ============================================ */
  .content-section{
    padding:100px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .content-header{
    max-width:600px;
    margin-bottom:44px;
  }

  .content-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-bottom:22px;
  }

  .content-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .content-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:18px;
  }

  .content-subtitle{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  .content-pillars{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:80px;
  }

  .pillar-tag{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    color:var(--ink);
    background:#FFFFFF;
    border:1px solid var(--line);
    border-radius:30px;
    padding:11px 22px;
  }

  .social-heading{
    font-family:var(--font-display);
    font-weight:800;
    font-size:22px;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:10px;
  }

  .social-sub{
    font-size:15px;
    line-height:1.6;
    color:var(--ink-soft);
    margin-bottom:32px;
  }

  .social-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:16px;
  }

  .social-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding:24px 20px;
    background:#FFFFFF;
    border-radius:16px;
    border:1px solid var(--line);
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .social-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(20,20,15,0.08);
    border-color:transparent;
  }

  .social-icon{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .social-icon svg{
    width:19px;
    height:19px;
  }

  .social-info{
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .social-platform{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14.5px;
    color:var(--ink);
  }

  .social-handle{
    font-size:12.5px;
    color:var(--ink-soft);
    word-break:break-word;
  }

  @media (max-width:1000px){
    .social-grid{
      grid-template-columns:repeat(3, 1fr);
    }
  }

  @media (max-width:640px){
    .content-section{
      padding:70px 20px 50px;
    }
    .content-pillars{
      margin-bottom:56px;
    }
    .social-grid{
      grid-template-columns:repeat(2, 1fr);
    }
  }

  /* ============================================
     SPEAKER SECTION — "05 — Conferencias & Speaker"
     ============================================ */
  .speaker-section{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .speaker-grid{
    display:grid;
    grid-template-columns:1fr 0.92fr;
    gap:72px;
    align-items:center;
  }

  .speaker-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-bottom:22px;
  }

  .speaker-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .speaker-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(32px, 3.2vw, 44px);
    line-height:1.12;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:28px;
  }

  .speaker-body{
    font-size:16px;
    line-height:1.75;
    color:var(--ink-soft);
  }

  .speaker-image{
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:4/5;
    box-shadow:0 30px 60px rgba(20,20,15,0.12);
    max-width:85%;
    margin-left:auto;
  }

  .speaker-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  @media (max-width:880px){
    .speaker-section{
      padding:25px 20px 45px;
    }
    .speaker-grid{
      grid-template-columns:1fr;
      gap:36px;
    }
    .speaker-grid > .speaker-image{
      order:-1;
      max-width:100%;
      margin-left:0;
      aspect-ratio:4/3;
    }
    .speaker-title{
      font-size:clamp(28px, 7vw, 36px);
    }
  }

  /* ============================================
     TALKS GRID + CTA — parte inferior de "Conferencias & Speaker"
     ============================================ */
  .talks-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:72px;
  }

  .talk-card{
    background:#FFFFFF;
    border-radius:16px;
    padding:28px 26px 30px;
    box-shadow:0 12px 32px rgba(20,20,15,0.06);
  }

  .talk-number{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--accent);
    background:var(--accent-soft);
    border-radius:20px;
    padding:6px 14px;
    margin-bottom:18px;
  }

  .talk-card h3{
    font-family:var(--font-display);
    font-weight:800;
    font-size:19px;
    line-height:1.25;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:12px;
  }

  .talk-card p{
    font-size:14px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  .talks-cta{
    display:flex;
    justify-content:center;
    /* Dos botones desde que la seccion ofrece correo y WhatsApp. Envuelven en
       pantallas estrechas en vez de comprimirse. */
    gap:12px;
    flex-wrap:wrap;
    margin-top:48px;
  }

  @media (max-width:880px){
    .talks-grid{
      grid-template-columns:1fr;
      gap:20px;
      margin-top:48px;
    }
    .talks-cta{
      margin-top:36px;
    }
  }

  /* ============================================
     CONTACT SECTION — "07 — Contacto" (mismo lenguaje visual que la portada)
     ============================================ */
  .contact-section{
    padding:20px 40px 160px;
    max-width:var(--container);
    margin:0 auto;
    text-align:center;
  }

  .contact-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-bottom:28px;
  }

  .contact-eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
  }

  .contact-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(46px, 8vw, 96px);
    line-height:1.02;
    letter-spacing:-0.03em;
    margin-bottom:44px;
    background:linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, rgba(22,22,26,0.32) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .contact-photo-wrap{
    width:220px;
    height:220px;
    margin:0 auto 40px;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 24px 50px rgba(20,20,15,0.16);
  }

  .contact-photo-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .contact-subtitle{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:520px;
    margin:0 auto 44px;
  }

  .contact-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
  }

  .btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    color:var(--ink);
    border:1.5px solid var(--ink);
    border-radius:999px;
    padding:14.5px 26px;
    font-size:14.5px;
    font-weight:600;
    font-family:var(--font-body);
    cursor:pointer;
    text-decoration:none;
    transition:background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
  }

  .btn-secondary:hover{
    background:var(--ink);
    color:var(--cta-text);
    transform:translateY(-2px);
  }

  @media (max-width:640px){
    .contact-section{
      padding:40px 20px 100px;
    }
    .contact-title{
      font-size:clamp(38px, 11vw, 56px);
    }
    .contact-photo-wrap{
      width:170px;
      height:170px;
    }
    .contact-actions{
      flex-direction:column;
      width:100%;
    }
    .contact-actions a{
      width:100%;
      justify-content:center;
    }
  }

  /* ============================================
     FOOTER
     ============================================ */
  .site-footer{
    width:100%;
    background:#F5F4F0;
    border-top:1px solid var(--line);
  }

  .footer-inner{
    max-width:var(--container);
    margin:0 auto;
    padding:36px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:24px;
  }

  .footer-left{
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
  }

  .footer-email{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--ink-soft);
    text-decoration:none;
    transition:color .2s ease;
  }

  .footer-email:hover{
    color:var(--ink);
  }

  .footer-email svg{
    width:16px;
    height:16px;
    flex-shrink:0;
  }

  .footer-social{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    color:var(--ink-faint);
    transition:color .2s ease, background .2s ease;
  }

  .footer-social a:hover{
    color:var(--ink);
    background:rgba(22,22,26,0.06);
  }

  .footer-social svg{
    width:15px;
    height:15px;
  }

  .footer-right{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
  }

  .footer-mark{
    width:32px;
    height:32px;
    font-size:12px;
    flex-shrink:0;
  }

  .footer-meta{
    font-size:12px;
    color:var(--ink-faint);
    white-space:nowrap;
  }

  .footer-link{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
    transition:color .2s ease;
  }

  .footer-link:hover{
    color:var(--accent);
  }

  @media (max-width:768px){
    .footer-inner{
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding:32px 20px;
      gap:20px;
    }
    .footer-left{
      flex-direction:column;
      gap:16px;
    }
    .footer-right{
      flex-direction:column;
      gap:10px;
    }
    .footer-meta{
      white-space:normal;
    }
  }


  /* ============================================
     FOUNDERS HERO — /founders/
     Mismo patron que .impact-section: rejilla de dos columnas
     dentro del contenedor, que se apila en <=880px.
     ============================================ */
  .founders-hero{
    padding:60px 40px 60px;
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }

  .founders-hero-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(34px, 3.6vw, 46px);
    line-height:1.12;
    letter-spacing:-0.02em;
    /* tinta solida a proposito: el gradiente de texto es solo del
       hero de la portada principal */
    color:var(--ink);
    margin-bottom:22px;
  }

  .founders-hero-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  .founders-hero-image{
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:3/2;
  }

  .founders-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  @media (max-width:880px){
    .founders-hero{
      padding:40px 20px 50px;
      grid-template-columns:1fr;
      gap:36px;
    }
  }

  /* ============================================
     FOUNDERS — bloque de explicacion, debajo del hero
     Ritmo vertical de .speaker-section, que tambien va
     encadenada a la seccion anterior.
     ============================================ */
  .founders-explica{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-explica-title,
  .et-h2{
    font-family:var(--font-display);
    font-weight:800;
    /* la escala h2 mas usada del sitio: por debajo del h1 del hero */
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    /* convencion de /founders/: los h2 van centrados. Sin tope de ancho,
       que a 720px el titulo se partia en dos lineas. */
    text-align:center;
    margin-bottom:28px;
  }

  .founders-explica-p{
    /* columna corta a proposito: a 1180 el renglon cansa de leer.
       margin-inline:auto la centra en el contenedor en vez de
       dejarla pegada a la izquierda. */
    max-width:720px;
    margin-inline:auto;
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    text-align:justify;
    /* justificado sin guiones abre huecos entre palabras; con
       hyphens:auto el navegador parte al final del renglon.
       Necesita saber el idioma: lo hereda del <html lang="es">. */
    -webkit-hyphens:auto;
    hyphens:auto;
  }

  .founders-explica-p + .founders-explica-p{
    margin-top:20px;
  }

  @media (max-width:880px){
    .founders-explica{
      padding:25px 20px 45px;
    }
  }

  /* ============================================
     FOUNDERS — seis dolores, debajo de la explicacion
     Rejilla sin tarjeta: los items respiran sobre el fondo,
     sin caja, sin borde y sin sombra.
     ============================================ */
  .founders-dolores{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-dolores-title{
    font-family:var(--font-display);
    font-weight:800;
    /* misma escala que el h2 del bloque de explicacion */
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-align:center;
    margin-bottom:14px;
  }

  .founders-dolores-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    text-align:center;
    max-width:640px;
    margin:0 auto 44px;
  }

  .founders-dolores-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px 36px;
    list-style:none;
  }

  .founders-dolor-icono{
    display:block;
    /* discreto: acompaña al parrafo, no lo domina */
    font-size:26px;
    line-height:1;
    margin-bottom:14px;
    /* a la izquierda, como el nombre y el parrafo: el conjunto
       entero arranca en el mismo margen. */
    text-align:left;
  }

  .founders-dolor-nombre{
    /* peso visual, no jerarquia: no es un heading a proposito.
       Se alinea con el parrafo, que es el texto al que pertenece. */
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    line-height:1.3;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin-bottom:8px;
  }

  .founders-dolor-p{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  @media (max-width:880px){
    .founders-dolores{
      padding:25px 20px 45px;
    }
    .founders-dolores-grid{
      grid-template-columns:repeat(2, 1fr);
      gap:34px 28px;
    }
  }

  @media (max-width:640px){
    .founders-dolores-grid{
      grid-template-columns:1fr;
      gap:30px;
    }
  }

  /* ============================================
     FOUNDERS — "Estare a tu lado", debajo de los dolores
     Invierte el hero: imagen a la izquierda y texto a la derecha,
     para que la pagina alterne. En el marcado el texto va primero,
     que es el orden en que conviene leerlo y el que queda al
     apilar; en desktop la imagen se adelanta con order.
     ============================================ */
  .founders-propuesta{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-propuesta-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    /* vive dentro de la columna de texto: se centra respecto a ella */
    text-align:center;
    margin-bottom:24px;
  }

  .founders-propuesta-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    /* la columna de texto, con el h2 ya dentro, se centra verticalmente
       contra la imagen cuadrada. */
    align-items:center;
  }

  .founders-propuesta-image{
    order:-1;
    border-radius:20px;
    overflow:hidden;
    /* cuadrada como el original: no se recorta a horizontal */
    aspect-ratio:1/1;
  }

  .founders-propuesta-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .founders-propuesta-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    margin-bottom:28px;
  }

  .founders-logros{
    list-style:none;
    display:grid;
    gap:20px;
  }

  .founders-logro{
    /* emoji a la izquierda y texto a la derecha: la columna es angosta
       y apilarlos gastaria el alto que no sobra. */
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:start;
  }

  .founders-logro-icono{
    /* mismo tamaño que los de la rejilla de dolores */
    font-size:26px;
    line-height:1.25;
  }

  .founders-logro-p{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  @media (max-width:880px){
    .founders-propuesta{
      padding:25px 20px 45px;
    }
    .founders-propuesta-grid{
      grid-template-columns:1fr;
      gap:36px;
    }
    .founders-propuesta-image{
      /* apilado: manda el orden del marcado, texto arriba */
      order:0;
    }
  }

  /* ============================================
     FOUNDERS — acordeon de los 6 modulos
     <details>/<summary> nativo: navegable por teclado sin JS.
     Los titulos de modulo NO son headings: viven en el summary,
     que ya tiene su propia semantica.
     ============================================ */
  .founders-modulos{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-modulos-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-align:center;
    margin-bottom:14px;
  }

  .founders-modulos-sub{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    text-align:center;
    margin-bottom:44px;
  }

  .founders-modulos-lista{
    max-width:820px;
    margin-inline:auto;
    border-top:1px solid var(--line);
  }

  .founders-modulo,
  .founders-faq-item{
    border-bottom:1px solid var(--line);
  }

  .founders-modulo summary,
  .founders-faq-item summary{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:20px;
    align-items:center;
    padding:22px 14px;
    cursor:pointer;
    /* fuera el triangulo por defecto, en los dos motores */
    list-style:none;
    border-radius:10px;
    transition:background .15s ease;
  }
  .founders-modulo summary::-webkit-details-marker,
  .founders-faq-item summary::-webkit-details-marker{ display:none; }

  .founders-modulo summary:hover,
  .founders-faq-item summary:hover{
    background:rgba(22,22,26,0.035);
  }

  /* el foco de teclado tiene que verse */
  .founders-modulo summary:focus-visible,
  .founders-faq-item summary:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:-2px;
  }

  .founders-modulo-num{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }

  .founders-modulo-nombre{
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    line-height:1.3;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .founders-modulo-flecha,
  .founders-faq-flecha{
    width:16px;
    height:16px;
    color:var(--ink-soft);
    flex-shrink:0;
    transition:transform .2s ease;
  }
  .founders-modulo[open] .founders-modulo-flecha,
  .founders-faq-item[open] .founders-faq-flecha{
    transform:rotate(180deg);
  }

  .founders-modulo-cuerpo,
  .founders-faq-cuerpo{
    padding:0 14px 26px;
    max-width:660px;
  }

  .founders-modulo-sub{
    font-size:16px;
    line-height:1.6;
    color:var(--ink);
    margin-bottom:16px;
  }

  .founders-modulo-temas{
    list-style:none;
    display:grid;
    gap:9px;
    margin-bottom:18px;
  }

  .founders-modulo-temas li{
    font-size:15.5px;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .founders-modulo-invitado{
    font-size:14px;
    line-height:1.6;
    color:var(--ink-soft);
    padding-top:14px;
    border-top:1px solid var(--line);
  }

  @media (max-width:880px){
    .founders-modulos{
      padding:25px 20px 45px;
    }
    .founders-modulo summary,
    .founders-faq-item summary{
      gap:14px;
      padding:20px 10px;
    }
    .founders-modulo-cuerpo,
    .founders-faq-cuerpo{
      padding:0 10px 24px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .founders-modulo-flecha,
    .founders-faq-flecha{ transition:none; }
  }

  /* ============================================
     FOUNDERS — historia + carrusel vertical
     Texto a la izquierda (720px) y carrusel sticky a la derecha,
     que acompaña el scroll del texto largo.
     ============================================ */
  .founders-historia{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-historia-grid{
    display:grid;
    /* 600 + 60 + 440 = los 1100px utiles del contenedor. La columna de
       texto se queda en ~71 caracteres por renglon, dentro del rango
       comodo de lectura; a 720px el renglon se hacia largo. */
    grid-template-columns:minmax(0,600px) minmax(0,1fr);
    gap:60px;
    /* centrada, no pegada arriba. El item sigue midiendo su contenido,
       asi que conserva recorrido dentro de su area para el sticky. */
    align-items:center;
  }

  .founders-historia-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-align:center;
    margin-bottom:28px;
  }

  .founders-historia-p{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    text-align:justify;
    -webkit-hyphens:auto;
    hyphens:auto;
  }

  .founders-historia-p + .founders-historia-p{
    margin-top:20px;
  }

  .founders-historia-media{
    position:sticky;
    top:40px;
    /* tope de 440px: con el contenedor a 1180 la columna mide justo eso,
       y en pantallas mas estrechas encoge sola sin desbordar. */
    max-width:440px;
  }

  .carrusel{
    position:relative;
    aspect-ratio:1/1;
    border-radius:20px;
    overflow:hidden;
  }

  .carrusel-slide{
    position:absolute;
    inset:0;
    /* estado de reposo: fuera de cuadro. Los keyframes hacen el resto. */
    opacity:0;
    transform:translateY(100%);
    /* 600ms entrar + 4s quieta + 600ms salir. La salida de una y la
       entrada de la siguiente ocurren a la vez, asi que el turno
       avanza cada 4.6s y el marco nunca se queda vacio.
       Cinco imagenes = 23s de ciclo. */
    animation:carruselCiclo 23s linear infinite;
    animation-delay:calc(var(--i) * 4.6s);
  }

  .carrusel-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  @keyframes carruselCiclo{
    /* porcentajes sobre 23s: 600ms entrando, 4s quieta, 600ms saliendo */
    0%       { transform:translateY(100%);  opacity:0; animation-timing-function:cubic-bezier(.2,.8,.2,1); }
    2.6087%  { transform:translateY(0);     opacity:1; animation-timing-function:linear; }
    20%      { transform:translateY(0);     opacity:1; animation-timing-function:cubic-bezier(.4,0,.8,.2); }
    22.6087% { transform:translateY(-100%); opacity:0; }
    100%     { transform:translateY(-100%); opacity:0; }
  }

  .carrusel:hover .carrusel-slide{
    animation-play-state:paused;
  }

  @media (max-width:880px){
    .founders-historia{
      padding:25px 20px 45px;
    }
    .founders-historia-grid{
      grid-template-columns:1fr;
      gap:36px;
    }
    .founders-historia-media{
      /* debajo del texto y sin sticky */
      position:static;
      width:100%;
      max-width:400px;
      margin-inline:auto;
    }
  }

  /* El movimiento en pantalla marea a algunas personas: con
     "reducir movimiento" el carrusel no se anima y se queda en una
     sola imagen fija. */
  @media (prefers-reduced-motion: reduce){
    .carrusel-slide{
      animation:none;
      transform:none;
      opacity:0;
      visibility:hidden;
    }
    .carrusel-slide:first-child{
      opacity:1;
      visibility:visible;
    }
  }

  /* ============================================
     FOUNDERS — tarjeta de precio del tier Plus
     Sin h2 por ahora: la seccion no aporta encabezado a la
     jerarquia de la pagina.
     ============================================ */
  .founders-precio{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-plan{
    max-width:520px;
    margin-inline:auto;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px 36px;
  }

  .founders-plan-nombre{
    /* peso visual, no jerarquia: a proposito no es un heading */
    font-family:var(--font-display);
    font-weight:800;
    font-size:24px;
    line-height:1.2;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:8px;
  }

  .founders-plan-precio{
    font-size:16px;
    line-height:1.5;
    color:var(--ink-soft);
    margin-bottom:28px;
    /* El subtitulo mide 513px y la tarjeta da 446: parte en dos en los
       tres anchos. Sin esto corta despues de "con" y deja la
       preposicion colgando al final del primer renglon; con balance
       reparte por la mitad y corta despues de "modulos". */
    text-wrap:balance;
  }

  .founders-plan-lista{
    list-style:none;
    display:grid;
    gap:14px;
    margin-bottom:32px;
  }

  .founders-plan-item{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:start;
    font-size:15.5px;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .founders-plan-check{
    width:17px;
    height:17px;
    margin-top:3px;
    /* en --ink-soft, no en verde: el verde del sistema es indicador
       de estado, y aqui seria decorativo. */
    color:var(--ink-soft);
    flex-shrink:0;
  }

  .founders-plan-cta{
    width:100%;
    justify-content:center;
  }

  .founders-garantia{
    max-width:520px;
    margin:26px auto 0;
    text-align:center;
    font-size:13.5px;
    line-height:1.6;
    /* --ink-soft y no --ink-faint: es el texto que quita el miedo a
       pagar, tiene que leerse. En faint daba 2.39:1 y no pasaba AA. */
    color:var(--ink-soft);
  }

  @media (max-width:880px){
    .founders-precio{
      padding:25px 20px 45px;
    }
    .founders-plan{
      padding:32px 24px;
    }
  }

  /* ============================================
     FOUNDERS — preguntas frecuentes
     Mismo componente que el acordeon de modulos: sus reglas ya
     cubren .founders-faq-item, asi que aqui solo va lo propio.
     ============================================ */
  .founders-faq{
    padding:30px 40px 70px;
    max-width:var(--container);
    margin:0 auto;
  }

  .founders-faq-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    text-align:center;
    margin-bottom:44px;
  }

  .founders-faq-lista{
    max-width:820px;
    margin-inline:auto;
    border-top:1px solid var(--line);
  }

  .founders-faq-item summary{
    /* sin numero: dos columnas en vez de las tres del modulo */
    grid-template-columns:1fr auto;
  }

  .founders-faq-pregunta{
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    line-height:1.3;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .founders-faq-respuesta{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  @media (max-width:880px){
    .founders-faq{
      padding:25px 20px 45px;
    }
  }

  /* ============================================
     FOUNDERS — CTA intermedio, antes de las preguntas
     Momento de ruptura, no una seccion mas: rompe a proposito la
     escala de h2 de la pagina y usa la del h1 del hero.
     ============================================ */
  .founders-cta{
    /* mas aire arriba y abajo que el resto: es una pausa */
    padding:100px 40px 110px;
    max-width:var(--container);
    margin:0 auto;
    text-align:center;
  }

  .founders-cta-title{
    font-family:var(--font-display);
    font-weight:800;
    /* la escala del h1 del hero, no la de los h2 de la pagina */
    --linea1:clamp(34px, 3.6vw, 46px);
    font-size:var(--linea1);
    line-height:1.12;
    letter-spacing:-0.02em;
    color:var(--ink);
    max-width:760px;
    margin:0 auto 36px;
  }

  /* Dos lineas dentro del MISMO h2: sigue siendo un solo encabezado
     para la jerarquia y un lector de pantalla lo lee de corrido. */
  .founders-cta-linea1,
  .founders-cta-linea2,
  .et-h2-linea,
  .et-cierre-linea1,
  .et-cierre-linea2{
    display:block;
  }

  .founders-cta-linea2{
    /* +3.5px sobre la linea 1 en CUALQUIER ancho: al sumarse dentro del
       calc, la diferencia es constante y no solo en desktop. */
    font-size:calc(var(--linea1) + 3.5px);
  }

  @media (max-width:880px){
    .founders-cta{
      padding:70px 20px 80px;
    }
    .founders-cta-title{
      margin-bottom:30px;
    }
  }

  /* ============================================
     CASOS — portada, intro y diagrama de pilares
     ============================================ */

  /* Portada a ancho de viewport: el contenedor rompe el ancho del
     documento sin usar 100vw, que suma el scrollbar y desborda. */
  .casos-portada{
    position:relative;
    /* Dentro del contenedor, no a sangre: los 40px de padding son los
       mismos del .nav, asi que el borde izquierdo cae a plomo con el
       logo ET y el derecho con el boton de Menu. */
    width:calc(100% - 80px);
    max-width:calc(var(--container) - 80px);
    margin-inline:auto;
    height:70vh;
    /* Tope de alto. El rotulo "technofibers lab" mide 1141 de los
       1920px de la foto y solo entra completo si la caja es al menos
       1.165 veces mas ancha que alta. La caja mide 100vw-80px hasta
       los 1180 y 1100px de ahi en adelante, asi que ese limite es
       85vw-68px o 940px, el que sea menor. Sin el tope, una ventana
       angosta y muy alta —un monitor en vertical— volveria a cortar
       el rotulo aunque el alto sea "solo" 70vh. */
    max-height:min(calc(85vw - 68px), 940px);
    border-radius:20px;
    overflow:hidden;
  }

  .casos-portada-slide{
    position:absolute;
    inset:0;
    /* estado de reposo: invisible. Los keyframes hacen el resto. */
    opacity:0;
    /* 3.5s a la vista + 800ms de fundido. La salida de una y la
       entrada de la siguiente ocurren a la vez, asi que el turno
       avanza cada 4.3s y el marco nunca se queda vacio.
       Cuatro imagenes = 17.2s de ciclo.
       El -0.8s del retraso arranca la primera ya opaca: la pagina
       no abre con el marco vacio. */
    animation:casosPortadaCiclo 17.2s linear infinite;
    animation-delay:calc(var(--i) * 4.3s - 0.8s);
  }

  .casos-portada img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* A 60vh el recorte se come hasta el 40% del alto de la foto, y en
     estas dos lo que importa esta abajo: los tres trabajadores bajo
     el tanque y la persona que camina por el pasillo de la nave.
     Ancladas al pie, entran en cuadro. Las otras dos —las prensas y
     la puerta del laboratorio— llevan su asunto al centro y se
     quedan con el 50% 50% de fabrica. */
  .casos-portada-slide:nth-child(2) img,
  .casos-portada-slide:nth-child(4) img{
    object-position:50% 100%;
  }

  /* De 880 para abajo pasan dos cosas a la vez. Una: el .nav baja su
     padding a 20px y la portada lo sigue, para no desalinearse del
     logo. Otra: el alto deja de medirse en vh y pasa a ser una
     proporcion del ancho, porque lo que decide si el rotulo del
     laboratorio se corta es el ancho de la caja, no el alto de la
     pantalla. Con 70vh, una tableta de 768x1024 daba una caja de
     728x717 —casi cuadrada— y el rotulo perdia 81px por la
     izquierda. Con 3/2 entra completo en cualquier ancho, de la
     tableta al telefono mas angosto, y sobran 91px por la izquierda y
     208px por la derecha. 4/3 es lo mas alto que admite el margen:
     a 3/2 la portada quedaba en 233px en un telefono de 390 y se
     leia como una franja, no como una portada. */
  @media (max-width:880px){
    .casos-portada{
      width:calc(100% - 40px);
      height:auto;
      max-height:none;
      aspect-ratio:4/3;
    }
  }

  @keyframes casosPortadaCiclo{
    /* porcentajes sobre 17.2s: 800ms entrando, 3.5s quieta, 800ms saliendo */
    0%       { opacity:0; }
    4.6512%  { opacity:1; }
    25%      { opacity:1; }
    29.6512% { opacity:0; }
    100%     { opacity:0; }
  }

  /* El movimiento en pantalla marea a algunas personas: con
     "reducir movimiento" la portada no se anima y se queda en la
     primera foto, fija. */
  @media (prefers-reduced-motion: reduce){
    .casos-portada-slide{
      animation:none;
      opacity:0;
      visibility:hidden;
    }
    .casos-portada-slide:first-child{
      opacity:1;
      visibility:visible;
    }
  }

  .casos-intro,
  .et-tesis{
    padding:70px 40px 40px;
    max-width:var(--container);
    margin:0 auto;
    text-align:center;
  }

  .casos-intro-title,
  .et-tesis-title,
  .etb-hero-title{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(34px, 3.6vw, 46px);
    line-height:1.12;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin-bottom:24px;
  }

  /* Dos lineas dentro del MISMO h1: un solo encabezado para la
     jerarquia y un solo nombre accesible. */
  .casos-intro-linea1,
  .casos-intro-linea2,
  .et-tesis-linea1,
  .et-tesis-linea2,
  .etb-hero-linea1,
  .etb-hero-linea2{
    display:block;
  }

  .casos-intro-p,
  .et-tesis-p,
  .etb-filosofia-p{
    max-width:720px;
    margin-inline:auto;
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    text-align:justify;
    -webkit-hyphens:auto;
    hyphens:auto;
  }

  .casos-pilares{
    padding:20px 40px 80px;
    max-width:var(--container);
    margin:0 auto;
  }

  .casos-diagrama-wrap{
    /* 400px sobre un viewBox de 320 = escala 1.25: las etiquetas de
       12 unidades acaban rindiendo a 15px, la medida del cuerpo. */
    max-width:400px;
    margin-inline:auto;
  }

  .casos-diagrama,
  .et-radial,
  .et-flujo{
    display:block;
    width:100%;
    height:auto;
    background:var(--bg);
  }

  /* lineas muy tenues, 1px real gracias al vector-effect */
  .casos-diagrama-radios line,
  .casos-diagrama-tronco,
  .et-radial-radios line,
  .et-radial-tronco,
  .et-flujo-lineas line{
    stroke:var(--line);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
  }

  /* el tronco solo aparece en la disposicion vertical */
  .casos-diagrama-tronco,
  .et-radial-tronco{ display:none; }

  .casos-diagrama-centro circle,
  .casos-diagrama-nodo circle,
  .et-radial-centro circle,
  .et-radial-nodo circle,
  .et-flujo-paso circle{
    fill:var(--ink);
  }

  .casos-diagrama-centro-texto,
  .et-radial-centro-texto{
    fill:var(--bg);
    font-family:var(--font-display);
    font-weight:700;
    font-size:12px;
    letter-spacing:0.08em;
    text-anchor:middle;
    dominant-baseline:middle;
  }

  .casos-diagrama-etiqueta,
  .et-radial-etiqueta,
  .et-flujo-etiqueta{
    fill:var(--ink);
    font-family:var(--font-body);
    font-weight:500;
    font-size:12px;
    text-anchor:middle;
  }

  @media (max-width:880px){
    .casos-intro,
    .et-tesis{
      padding:50px 20px 30px;
    }
    .casos-pilares{
      padding:20px 20px 60px;
    }
  }

  /* En pantallas estrechas el radial se aprieta: los nodos pasan a
     una columna. El texto no se duplica, solo se reubican los grupos
     con transform, asi que el SVG sigue teniendo una sola copia. */
  @media (max-width:640px){
    .casos-diagrama-radios{ display:none; }
    .casos-diagrama-tronco{ display:block; }

    .casos-diagrama-centro{ transform:translate(0px, -95px); }
    .casos-diagrama-nodo--1{ transform:translate(0px, 98px); }
    .casos-diagrama-nodo--2{ transform:translate(102.2px, -31px); }
    .casos-diagrama-nodo--3{ transform:translate(-102.2px, 17px); }
  }

  /* ============================================
     CASOS — las cuatro empresas, tres bloques cada una
     Doce bloques de dos columnas. La imagen alterna de lado en cada
     bloque y no reinicia al cambiar de empresa: impar a la
     izquierda, par a la derecha.
     Ni los rotulos ni los titulos de bloque son headings. La
     jerarquia de la pagina es h1 -> h2 y nada mas: el unico h2 es
     el nombre de cada empresa.
     ============================================ */
  .casos-empresas{
    padding:20px 40px 80px;
    max-width:var(--container);
    margin:0 auto;
  }

  .casos-empresa + .casos-empresa{
    margin-top:100px;
  }

  .casos-empresa-nombre{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin:0 0 40px;
  }

  /* Cuatro senales de que el nombre es un enlace de salida: la flecha
     diagonal, el dominio de destino debajo, el cursor de mano y el
     hover. Ninguna usa el verde: el verde es indicador de estado. */
  .casos-empresa-nombre a,
  .et-portafolio-item a{
    display:inline-block;
    cursor:pointer;
    border-radius:4px;
  }

  .casos-empresa-nombre-linea,
  .et-portafolio-linea{
    display:inline-flex;
    align-items:center;
    gap:0.24em;
    /* el subrayado nace transparente para que al aparecer no empuje
       nada de sitio */
    border-bottom:2px solid transparent;
    transition:border-color .2s ease;
  }

  .casos-empresa-flecha,
  .et-flecha{
    /* en em: crece con el nombre en cada breakpoint */
    width:0.58em;
    height:0.58em;
    flex:none;
    /* baja un pelo respecto al centro optico de las mayusculas */
    margin-top:0.06em;
    transition:transform .2s ease;
  }

  .casos-empresa-dominio,
  .et-dominio{
    display:block;
    margin-top:10px;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:500;
    letter-spacing:normal;
    color:var(--ink-soft);
  }

  .casos-empresa-nombre a:hover .casos-empresa-nombre-linea,
  .casos-empresa-nombre a:focus-visible .casos-empresa-nombre-linea,
  .et-portafolio-item a:hover .et-portafolio-linea,
  .et-portafolio-item a:focus-visible .et-portafolio-linea{
    border-bottom-color:var(--ink);
  }

  .casos-empresa-nombre a:hover .casos-empresa-flecha,
  .casos-empresa-nombre a:focus-visible .casos-empresa-flecha,
  .et-portafolio-item a:hover .et-flecha,
  .et-portafolio-item a:focus-visible .et-flecha{
    transform:translate(2px, -2px);
  }

  /* El foco por teclado necesita su propia marca: el subrayado solo no
     basta para saber donde esta uno. */
  .casos-empresa-nombre a:focus-visible,
  .et-portafolio-item a:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:6px;
  }

  @media (prefers-reduced-motion: reduce){
    .casos-empresa-flecha,
    .et-flecha{
      transition:none;
    }
    .casos-empresa-nombre a:hover .casos-empresa-flecha,
    .casos-empresa-nombre a:focus-visible .casos-empresa-flecha,
    .et-portafolio-item a:hover .et-flecha,
    .et-portafolio-item a:focus-visible .et-flecha{
      transform:none;
    }
  }

  .casos-empresa-bloque{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }

  .casos-empresa-bloque + .casos-empresa-bloque{
    margin-top:60px;
  }

  /* Invertido: la imagen pasa a la derecha sin tocar el orden del
     marcado, para que al apilarse siga saliendo arriba. */
  .casos-empresa-bloque--invertido .casos-empresa-media{
    grid-column:2;
    grid-row:1;
  }

  .casos-empresa-bloque--invertido .casos-empresa-texto{
    grid-column:1;
    grid-row:1;
  }

  .casos-empresa-media{
    position:relative;
    border-radius:20px;
    overflow:hidden;
    /* Cuadrada porque las fotos lo son: 1080x1080 las trece. En 4/3
       object-fit:cover se comeria el 25% del alto, y hay al menos una
       —la de botella a fibra a almohada, que se lee de arriba abajo—
       que ese recorte destruiria. Asi entran enteras. */
    aspect-ratio:1/1;
  }

  .casos-empresa-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* Las fotos de cada empresa rotan en sus tres bloques. Cada foto
     aguanta 3s en pantalla, con 600ms de relevo: la que sale y la que
     entra se cruzan, asi que el marco nunca se queda vacio.
     Los tres bloques de una misma empresa arrancan desfasados una
     foto cada uno, para que nunca se vean dos iguales a la vez. El
     desfase esta en el orden del marcado, no en el retraso: asi el
     primero del HTML es siempre el que se ve al arrancar. */
  .casos-empresa-slide,
  .etb-slide{
    position:absolute;
    inset:0;
    opacity:0;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    /* -0.6s: la primera arranca ya opaca y el hueco no abre vacio */
    animation-delay:calc(var(--i) * 3s - 0.6s);
  }

  .casos-empresa-media--2 .casos-empresa-slide{
    animation-name:casosEmpresaCiclo2;
    animation-duration:6s;
  }

  /* Todos los carruseles de producto de /et-brands/ van al mismo paso:
     3 s de foto a plena opacidad + 600 ms de relevo = 3.6 s. El retraso
     vive aqui para que un producto nuevo lo herede sin pensarlo; cada
     regla de abajo solo elige cuantas fotos tiene y, con eso, el ciclo. */
  .etb-slide{
    animation-delay:calc(var(--i) * 3.6s - 0.6s);
  }

  .etb-producto-media--3 .etb-slide{
    animation-name:etbCiclo3;
    animation-duration:10.8s;
  }

  .etb-producto-media--4 .etb-slide{
    animation-name:etbCiclo4;
    animation-duration:14.4s;
  }

  /* porcentajes sobre 10.8s: 600ms entrando, 3s quieta, 600ms saliendo */
  @keyframes etbCiclo3{
    0%        { opacity:0; }
    5.5556%   { opacity:1; }
    33.3333%  { opacity:1; }
    38.8889%  { opacity:0; }
    100%      { opacity:0; }
  }

  /* los mismos tiempos, repartidos sobre 14.4s */
  @keyframes etbCiclo4{
    0%        { opacity:0; }
    4.1667%   { opacity:1; }
    25%       { opacity:1; }
    29.1667%  { opacity:0; }
    100%      { opacity:0; }
  }

  .casos-empresa-media--4 .casos-empresa-slide{
    animation-name:casosEmpresaCiclo4;
    animation-duration:12s;
  }

  /* los mismos tiempos, repartidos sobre 6s */
  @keyframes casosEmpresaCiclo2{
    0%   { opacity:0; }
    10%  { opacity:1; }
    50%  { opacity:1; }
    60%  { opacity:0; }
    100% { opacity:0; }
  }

  /* porcentajes sobre 12s: 600ms entrando, 2.4s quieta, 600ms saliendo */
  @keyframes casosEmpresaCiclo4{
    0%   { opacity:0; }
    5%   { opacity:1; }
    25%  { opacity:1; }
    30%  { opacity:0; }
    100% { opacity:0; }
  }

  /* El movimiento en pantalla marea a algunas personas: con "reducir
     movimiento" nada rota y cada bloque se queda fijo en su primera
     foto, que por el desfase del marcado es distinta en cada uno. */
  @media (prefers-reduced-motion: reduce){
    /* El selector lleva .casos-empresa-media a proposito. Sin el pesa
       menos que .casos-empresa-media--4 .casos-empresa-slide, el
       animation:none no gana y la primera foto de cada bloque se
       queda parpadeando: justo el movimiento que hay que quitar. */
    .casos-empresa-media .casos-empresa-slide,
    .etb-producto-media .etb-slide{
      animation:none;
      opacity:0;
      visibility:hidden;
    }
    .casos-empresa-media .casos-empresa-slide:first-child,
    .etb-producto-media .etb-slide:first-child{
      opacity:1;
      visibility:visible;
    }
  }

  .casos-empresa-rotulo,
  .et-rotulo{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    /* --ink-soft, no --ink-faint: a 2.39:1 las doce etiquetas no se
       leen. Mismo criterio que el texto de garantia de la tarjeta de
       precio de /founders/. */
    color:var(--ink-soft);
    margin:0 0 14px;
  }

  .casos-empresa-titulo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(22px, 2.2vw, 28px);
    line-height:1.2;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0 0 16px;
  }

  .casos-empresa-p{
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0;
  }

  /* De 880 para abajo se apila: la imagen arriba y el texto abajo en
     los doce bloques, invertidos incluidos, porque el orden del
     marcado ya es ese. */
  @media (max-width:880px){
    .casos-empresa-bloque{
      grid-template-columns:1fr;
      gap:28px;
    }
    .casos-empresa-bloque--invertido .casos-empresa-media,
    .casos-empresa-bloque--invertido .casos-empresa-texto{
      grid-column:auto;
      grid-row:auto;
    }
    .casos-empresa-bloque + .casos-empresa-bloque{
      margin-top:44px;
    }
    .casos-empresa + .casos-empresa{
      margin-top:70px;
    }
    .casos-empresa-nombre{
      margin:0 0 30px;
    }
  }

  @media (max-width:640px){
    .casos-empresas{
      padding:20px 20px 60px;
    }
  }

  /* ============================================
     ETURELAB
     Casi todo lo visual sale de reglas que ya existian: la portada y
     la tesis son las de /casos/, los h2 la escala de /founders/, los
     enlaces de salida el patron del portafolio de /casos/ y los dos
     diagramas el lenguaje del radial de pilares. Aqui solo va lo que
     no tenia donde apoyarse.
     ============================================ */
  .et-bloque{
    padding:40px;
    max-width:var(--container);
    margin:0 auto;
  }

  .et-rotulo{
    text-align:center;
  }

  /* Los puntos llevan flecha en vez de vinneta. Sigue siendo una lista
     de verdad: la flecha la pone el CSS, asi que no entra en el texto
     que lee un lector de pantalla. */
  .et-flechas{
    list-style:none;
    padding:0;
    margin:36px auto 0;
    max-width:720px;
  }

  .et-flechas li{
    position:relative;
    padding-left:30px;
    margin-bottom:16px;
    font-size:17px;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .et-flechas li:last-child{
    margin-bottom:0;
  }

  .et-flechas li::before{
    content:"\2192";
    position:absolute;
    left:0;
    top:0;
    color:var(--ink);
  }

  /* --- diagrama de flujo: el presente --- */
  .et-flujo-wrap{
    /* 420 sobre un viewBox de 335 = escala 1.25, la misma que el radial
       de /casos/: las etiquetas de 12 unidades rinden a 15px. */
    max-width:420px;
    margin-inline:auto;
  }

  /* --- diagrama radial: el futuro --- */
  .et-radial-wrap{
    max-width:400px;
    margin-inline:auto;
  }

  /* --- seccion dividida: dos caminos --- */
  .et-caminos-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    margin-top:40px;
    align-items:start;
  }

  /* una linea muy tenue entre los dos caminos: se leen como dos
     puertas distintas sin que ninguna pese mas que la otra. */
  .et-caminos-grid > * + *{
    border-left:1px solid var(--line);
    padding-left:60px;
  }

  .et-camino-titulo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    line-height:1.2;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0 0 12px;
  }

  /* Bajada de columna: una linea de contexto entre el titulo y la
     lista. Va en --ink-soft para que el titulo siga mandando. */
  .et-camino-bajada{
    font-size:17px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0 0 24px;
  }

  .et-camino-lista{
    list-style:none;
    padding:0;
    margin:0 0 32px;
  }

  .et-camino-lista li{
    margin-bottom:18px;
    font-size:17px;
    line-height:1.6;
    color:var(--ink-soft);
  }

  .et-camino-lista li:last-child{
    margin-bottom:0;
  }

  .et-camino-lista strong{
    font-weight:600;
    color:var(--ink);
  }

  .et-cta{
    display:inline-block;
    background:var(--cta);
    color:var(--bg);
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    padding:14px 26px;
    border-radius:999px;
    transition:opacity .2s ease;
  }

  .et-cta:hover,
  .et-cta:focus-visible{
    opacity:.85;
  }

  .et-cta:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:4px;
  }

  /* --- portafolio: las cuatro empresas --- */
  .et-portafolio{
    list-style:none;
    padding:0;
    margin:40px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  /* Los nombres NO son headings: la jerarquia de la pagina es
     h1 -> h2 y se acaba. */
  .et-portafolio-linea{
    font-family:var(--font-display);
    font-weight:700;
    font-size:24px;
    line-height:1.2;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .et-portafolio-desc{
    display:block;
    margin-top:10px;
    font-size:16px;
    line-height:1.55;
    color:var(--ink-soft);
  }

  @media (max-width:880px){
    .et-bloque{
      padding:30px 20px;
    }
    .et-caminos-grid{
      grid-template-columns:1fr;
      gap:44px;
    }
    /* apilados, la linea pasa de vertical a horizontal */
    .et-caminos-grid > * + *{
      border-left:none;
      padding-left:0;
      border-top:1px solid var(--line);
      padding-top:44px;
    }
    .et-portafolio{
      grid-template-columns:1fr;
      gap:32px;
    }
  }

  /* En pantallas estrechas el radial se aprieta: los nodos pasan a una
     columna, igual que el de /casos/. El texto no se duplica, solo se
     reubican los grupos, asi que el SVG sigue teniendo una sola copia
     de cada etiqueta. Aqui las etiquetas ademas se van al lado del
     nodo en vez de debajo: cinco nodos en columna no caben si cada uno
     arrastra su renglon. */
  @media (max-width:640px){
    .et-radial-radios{ display:none; }
    .et-radial-tronco{ display:block; }

    .et-radial-centro{ transform:translate(0px, -100px); }
    .et-radial-nodo--1{ transform:translate(0px, 98px); }
    .et-radial-nodo--2{ transform:translate(-112.22px, 54.46px); }
    .et-radial-nodo--3{ transform:translate(-69.36px, -39.46px); }
    .et-radial-nodo--4{ transform:translate(69.36px, -1.46px); }
    .et-radial-nodo--5{ transform:translate(112.22px, 168.46px); }

    .et-radial-etiqueta{
      text-anchor:start;
      transform:translate(18px, -23px);
    }
  }

  /* La portada de /eturelab/ no se recorta: entra entera. Lo unico que
     la limita son los dos bordes del contenedor, los mismos 40px de
     padding del .nav, y el alto lo pone la propia foto. Por eso no
     lleva height ni aspect-ratio ni object-fit: en cuanto aparece
     cualquiera de los tres, el navegador empieza a decidir que parte
     de la imagen sobra, y aqui no sobra ninguna. */
  .et-portada{
    width:calc(100% - 80px);
    max-width:calc(var(--container) - 80px);
    margin-inline:auto;
    border-radius:20px;
    overflow:hidden;
  }

  .et-portada img{
    width:100%;
    height:auto;
    display:block;
  }

  @media (max-width:880px){
    .et-portada{
      width:calc(100% - 40px);
    }
  }

  /* ============================================
     ETURELAB — CTA de cierre
     Mismo patron que el CTA intermedio de /founders/: el h2 sube a la
     escala del h1 y la seccion respira mas que las demas, para que se
     lea como una pausa y no como una seccion mas.
     Este si tiene destino: va a correo.
     ============================================ */
  .et-cierre{
    /* mas aire arriba y abajo que el resto: es una pausa */
    padding:100px 40px 110px;
    max-width:var(--container);
    margin:0 auto;
    text-align:center;
  }

  .et-cierre-title{
    font-family:var(--font-display);
    font-weight:800;
    /* la escala del h1, no la de los h2 de la pagina */
    --linea1:clamp(34px, 3.6vw, 46px);
    font-size:var(--linea1);
    line-height:1.12;
    letter-spacing:-0.02em;
    color:var(--ink);
    margin:0 auto 24px;
    /* La linea 1 mide 56 caracteres y a 46px pide 1248px: no cabe en
       los 1100 del contenedor a ningun ancho. Ya que va a partirse,
       que parta por la mitad y no dejando "sola idea." colgando. */
    text-wrap:balance;
  }

  .et-cierre-linea2{
    /* +3.5px sobre la linea 1 en CUALQUIER ancho: al sumarse dentro del
       calc, la diferencia es constante y no solo en desktop. */
    font-size:calc(var(--linea1) + 3.5px);
  }

  .et-cierre-p{
    font-size:17px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0 auto 36px;
  }

  .et-cierre-boton:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:4px;
  }

  @media (max-width:880px){
    .et-cierre{
      padding:70px 20px 80px;
    }
    .et-cierre-title{
      margin-bottom:20px;
    }
  }

  /* ============================================
     ET BRANDS
     El hero, los h2, los rotulos, el parrafo justificado y el CTA de
     cierre salen de reglas que ya existian. Aqui solo va el sistema
     de marcas.
     ============================================ */

  /* La bajada del hero va centrada, no justificada: son dos renglones
     y justificarlos abriria huecos entre palabras. */
  .etb-hero-bajada{
    max-width:720px;
    margin-inline:auto;
    font-size:17px;
    line-height:1.65;
    color:var(--ink-soft);
  }

  /* Ni los nombres de marca ni los de producto son headings: la
     jerarquia de la pagina es h1 -> h2 x3 y se acaba. El peso lo dan
     el cuerpo y el tamano, no la etiqueta. */
  .etb-productos{
    list-style:none;
    padding:0;
    margin:28px 0 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  /* Los cinco productos van en una sola rejilla, que los reparte
     2 + 2 + 1. El quinto se quedaria solo en la columna izquierda con
     media rejilla vacia al lado. Ocupa el ancho completo pero se
     limita al ancho de una columna y se centra: mismo tamano que las
     otras cuatro, centrado respecto a la pagina.
     :last-child:nth-child(odd) es exactamente "el ultimo, si le toca
     posicion impar", que es la unica situacion en que queda solo. */
  /* Columna flexible para que el boton se vaya al fondo de la tarjeta:
     los textos de cada producto miden distinto y sin esto los botones
     de una misma fila quedarian a alturas diferentes. */
  .etb-producto{
    display:flex;
    flex-direction:column;
  }

  .etb-producto:last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:calc(50% - 20px);
    margin-inline:auto;
  }

  .etb-producto-media{
    /* marco de referencia de los slides cuando el hueco lleva carrusel */
    position:relative;
    border-radius:20px;
    overflow:hidden;
    /* cuadrado, reservado: cuando lleguen las fotos el bloque ya tiene
       su alto y no salta. Sin fondo de color: el hueco queda vacio. */
    aspect-ratio:1/1;
  }

  .etb-producto-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* La marca ya no encabeza un grupo: acompana a su producto dentro de
     la tarjeta. Asi los cinco caben en una sola rejilla y et organics
     puede aparecer dos veces sin duplicar un encabezado. */
  .etb-producto-marca{
    font-family:var(--font-body);
    font-size:14px;
    color:var(--ink-soft);
    margin:20px 0 4px;
  }

  .etb-producto-marca + .etb-producto-nombre{
    margin-top:0;
  }

  .etb-producto-nombre{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    line-height:1.25;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:20px 0 8px;
  }

  .etb-ficha{
    margin-top:18px;
  }

  /* Etiquetas discretas, no headings: la jerarquia de la pagina sigue
     siendo h1 -> h2 y nada mas. */
  .etb-ficha-rotulo{
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    /* --ink-soft, no --ink-faint: estos rotulos son la estructura que
       hace legible la ficha, no un adorno. A 2.39:1 no se leen. */
    color:var(--ink-soft);
    margin:0 0 6px;
  }

  .etb-ficha-texto{
    font-size:16px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0;
  }

  /* margin-top:auto empuja el boton al fondo de la tarjeta; los 28px
     de la ultima ficha garantizan el aire minimo cuando la tarjeta es
     la mas alta de su fila y no sobra espacio que repartir. */
  .etb-ficha:last-of-type{
    margin-bottom:28px;
  }

  .etb-producto-boton{
    margin-top:auto;
    align-self:flex-start;
  }

  @media (max-width:880px){
    .etb-productos{
      grid-template-columns:1fr;
      gap:36px;
    }
    /* apilado ya no hay media rejilla que llenar: la tarjeta suelta
       vuelve a comportarse como las demas */
    .etb-producto:last-child:nth-child(odd){
      grid-column:auto;
      max-width:none;
      margin-inline:0;
    }  }