/* COMIND web: maquetación responsive de comind.es.
   Colores, tipografía, espaciado y radios salen de ds/comind/tokens.css (COMIND DS 11NOV26 - 12).
   Puntos de corte: escritorio 1200px o más, tableta 768 a 1199px, móvil hasta 767px. */

/* Base */
.pg{min-height:100vh;display:flex;flex-direction:column;background:var(--blanco);color:var(--gris-900);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.pg *,.pg *::before,.pg *::after{box-sizing:border-box}
:where(.pg) :where(h1,h2,h3,p,ul,ol){margin:0}
:where(.pg) :where(ul,ol){padding:0;list-style:none}
.pg h1,.pg h2,.pg h3,.pg .h1,.pg .h2,.pg .h3,.pg .display{text-wrap:balance}
.pg main{flex:none}
.pg a{transition:color .15s,background-color .15s,border-color .15s}
.pg :focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.pg [id]{scroll-margin-top:104px}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.azul{color:var(--azul-286)}
.wrap{width:100%;max-width:1328px;margin-left:auto;margin-right:auto;padding-left:64px;padding-right:64px}
.sec{margin-top:96px}
.saltar{position:absolute;left:24px;top:-80px;z-index:30;padding:8px 16px;border-radius:var(--radio-sm);background:var(--azul-286);color:var(--blanco);font-weight:700;text-decoration:none}
.saltar:focus{top:16px}
.lnk{color:var(--azul-286);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.lnk:hover{color:var(--azul-noche)}
.ico{display:block;flex:none;width:24px;height:24px}
.ico-32{width:32px;height:32px}
.ico-48{width:48px;height:48px}

/* Huecos de fotografía: se sustituyen por fotos reales */
.hueco{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;padding:40px;background:var(--gris-200);color:var(--gris-900)}
.hueco-t{max-width:260px;text-align:center;font-size:14px;line-height:20px;font-weight:600}
img.foto{display:block;object-fit:cover;background:var(--gris-200)}

/* 1. Navegación */
.nav{position:sticky;top:0;z-index:20;background:var(--blanco);border-bottom:1px solid transparent;transition:border-color .15s}
.nav.is-scrolled{border-bottom-color:var(--gris-200)}
.nav-in{display:flex;align-items:center;gap:40px;padding-top:16px;padding-bottom:16px}
.nav-logo{display:block;flex:none;line-height:0;border-radius:var(--radio-sm)}
.nav-logo img{width:168px;height:auto}
.nav-links{display:flex;align-items:center;gap:40px;margin-left:auto}
.nav-links a{padding:12px 0;color:var(--gris-900);font-size:16px;line-height:24px;font-weight:600;text-decoration:none}
.nav-links a:hover{color:var(--azul-286);text-decoration:underline;text-underline-offset:6px}
.nav-acc{display:flex;align-items:center;gap:8px}
.nav-menu{display:none;align-items:center;min-height:48px;padding:0 8px;border:0;border-radius:var(--radio-sm);background:transparent;color:var(--azul-286);font-family:var(--font-sans);font-size:16px;line-height:20px;font-weight:700;cursor:pointer;transition:background-color .15s}
.nav-menu:hover{background:var(--gris-100)}
.menu-movil{display:none}

/* 2. Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 512px;align-items:center;column-gap:64px;margin-top:24px;padding-left:max(64px,calc((100% - 1200px) / 2))}
.hero-txt{padding-top:40px;padding-bottom:40px}
.hero-txt .display{margin-top:24px}
.hero-txt .subtitulo{margin-top:24px;max-width:520px}
.onda{position:relative;display:inline-block;padding-bottom:56px}
.sin-corte-m{white-space:normal}
.onda img{position:absolute;left:50%;bottom:0;width:160px;height:auto;transform:translateX(-50%);pointer-events:none}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:40px}
.foto-01{display:block;width:100%;height:640px;object-fit:cover;border-radius:999px 0 0 999px;background:var(--gris-200)}

/* 3. Fundador: bio con la trayectoria personal (no son clientes de la agencia) */
.fundador{display:grid;grid-template-columns:360px minmax(0,1fr);gap:64px;align-items:center;padding:64px;border-radius:var(--radio-md);background:var(--gris-100)}
.foto-06{width:360px;height:450px;border-radius:999px}
.fundador-txt{max-width:680px}
.fundador-txt .h2{margin-top:8px}
.fundador-txt .subtitulo{margin-top:16px}
.fundador-txt .cuerpo{margin-top:16px;max-width:600px}
.fundador-txt .tray-cab{margin-top:40px}
.cifras{display:flex;gap:64px;margin-top:16px}
.cifras li{display:flex;flex-direction:column;gap:4px}
.cifras .cuerpo{margin-top:0}
.fundador-txt .tray{margin-top:24px}

/* 4. El problema */
.prob-cab{max-width:960px}
.prob-sub{margin-top:64px}
.prob-sub .h3{margin-top:8px}
.razones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px}
.razon{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:200px}
.razon-top{display:flex;align-items:flex-start;justify-content:space-between}

/* 5. Para eso existe COMIND */
.existe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:end}

/* 6. Qué obtienes */
.obt-bloque{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;margin-top:64px}
.obt-bloque.primero{margin-top:40px}
.obt-txt{max-width:480px}
.obt-txt .h2{margin-top:16px}
.obt-txt .cuerpo{margin-top:16px}
.obt-sangre{display:grid;grid-template-columns:calc(max(64px, (100% - 1200px) / 2) + 480px) minmax(0,1fr);gap:64px;align-items:center;margin-top:64px;padding-right:max(64px,calc((100% - 1200px) / 2))}
.obt-sangre .foto-03{order:-1}
.foto-02{justify-self:center;width:320px;height:400px;border-radius:999px}
.foto-03{width:100%;height:400px;border-radius:0 999px 999px 0}
.foto-04{justify-self:center;width:400px;height:400px;border-radius:50%}
.resumen{margin-top:64px;padding-top:40px;border-top:1px solid var(--gris-200)}
.resumen .h3{max-width:760px}

/* 7. Para quién */
.quien{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
.panel{margin-top:40px;padding:40px;border-radius:var(--radio-md);background:var(--gris-100)}
.lista{display:flex;flex-direction:column;gap:24px}
.lista li{display:flex;align-items:flex-start;gap:8px}
.lista .ico{margin-top:1px;color:var(--azul-286)}
.foto-05{justify-self:end;width:100%;max-width:360px;aspect-ratio:4/5;border-radius:var(--radio-md)}

/* Banda azul-profundo a sangre (ahora la lleva el método) */
.banda{margin-top:96px;padding-top:96px;padding-bottom:96px;background:var(--azul-profundo);color:var(--blanco)}
.banda-metodo .h1,.banda-metodo .h3{color:var(--blanco)}
.banda-metodo .subtitulo,.banda-metodo .cuerpo,.banda-metodo .etiqueta{color:var(--gris-200)}
.banda-metodo .paso-n{color:var(--naranja-151)}
.banda-metodo .paso::before{background:var(--azul-claro)}

/* 9. Método */
.metodo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.metodo-cab{position:sticky;top:126px}
.metodo-cab .subtitulo{margin-top:24px;max-width:400px}
.pasos{display:flex;flex-direction:column}
.paso{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;padding-bottom:64px}
.paso:last-child{padding-bottom:0}
.paso::before{content:"";position:absolute;left:28px;top:68px;bottom:16px;width:1px;background:var(--gris-200)}
.paso:last-child::before{content:none}
.paso-c .h3{margin-top:8px}
.paso-c .cuerpo{margin-top:8px;max-width:560px}

/* 11. Preguntas frecuentes */
.faqs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.faqs-cab{position:sticky;top:126px}
.faq-lista{display:flex;flex-direction:column;gap:8px}
.faq{border-radius:var(--radio-md);background:var(--gris-100);transition:background-color .15s}
.faq:has(.faq-q:hover){background:var(--gris-200)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:64px;margin:0;padding:16px 24px;border:0;border-radius:var(--radio-md);background:transparent;color:var(--azul-286);font-family:var(--font-sans);font-size:18px;line-height:26px;font-weight:600;text-align:left;cursor:pointer}
.faq-q .ico{color:var(--azul-286)}
.faq.is-open .faq-v{display:none}
.faq-r{padding:0 24px 24px}
.faq-r .cuerpo{max-width:600px}

/* 12. Cierre y pie */
.final{flex:1 0 auto;margin-top:96px;background:var(--azul-profundo);color:var(--blanco)}
.cierre{padding-top:96px;padding-bottom:96px}
.cierre .subtitulo{margin-top:24px;color:var(--gris-200)}
.cierre .c-btn{margin-top:40px}
.pie{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:40px 24px;padding-top:64px;padding-bottom:64px;border-top:1px solid var(--azul-claro)}
.pie.solo{border-top:0}
.pie-logo{width:168px;height:auto}
.pie-frases{display:flex;flex-direction:column;gap:4px;margin-top:24px}
.pie-frases p{color:var(--gris-200)}
.pie-frases p:first-child{color:var(--blanco);font-weight:600}
.pie-enlaces{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pie a{color:var(--blanco);font-weight:600;text-decoration:none}
.pie a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{padding-top:24px;padding-bottom:40px;border-top:1px solid var(--azul-claro);color:var(--gris-200)}
.legal a{color:var(--gris-200);text-decoration:none}
.legal a:hover{color:var(--blanco);text-decoration:underline;text-underline-offset:4px}

/* Contacto */
.contacto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;margin-top:64px}
.contacto-txt .display{margin-top:24px}
.contacto-txt .subtitulo{margin-top:24px}
.calendario{height:720px;border-radius:var(--radio-md)}
.calendario .ico{color:var(--azul-286)}

/* Aparición al hacer scroll: una vez por elemento, solo con la página desplazable */
.pg.anim .rv{transition:opacity .35s cubic-bezier(.2,.6,.2,1),transform .35s cubic-bezier(.2,.6,.2,1)}
.pg.anim .rv:not(.is-in){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  .pg.anim .rv,.pg.anim .rv:not(.is-in){opacity:1;transform:none;transition:none}
  .pg a,.nav,.faq,.nav-menu{transition:none}
}

/* Escritorio: el final del titular del hero no se parte */
@media (min-width:1200px){
  .sin-corte{white-space:nowrap}
}

/* Tableta */
@media (max-width:1199px){
  .wrap{padding-left:40px;padding-right:40px}
  .hero{grid-template-columns:minmax(0,1fr) 40%;column-gap:40px;padding-left:40px}
  .foto-01{height:560px}
  .cifras{gap:40px}
  .razones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .obt-sangre{grid-template-columns:45% minmax(0,1fr);gap:40px;padding-right:40px}
  .obt-bloque{gap:40px}
  .foto-02{width:320px;height:400px}
  .foto-04{width:360px;height:360px}
  .fundador{grid-template-columns:240px minmax(0,1fr);gap:40px;padding:40px}
  .foto-06{width:240px;height:300px}
  .pie{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* Móvil */
@media (max-width:767px){
  .wrap{padding-left:24px;padding-right:24px}
  .sec{margin-top:64px}
  .pg [id]{scroll-margin-top:88px}
  .pg .display{font-size:44px;line-height:50px;letter-spacing:-.5px}
  .pg .h1{font-size:32px;line-height:38px;letter-spacing:0}
  .pg .h2{font-size:24px;line-height:30px}
  .pg .h3{font-size:20px;line-height:26px}

  .nav-in{gap:8px}
  .nav-logo img{width:136px}
  .nav-links{display:none}
  .nav-acc{margin-left:auto}
  .nav-menu{display:inline-flex}
  .nav .c-btn{padding-left:16px;padding-right:16px}
  .menu-movil{display:flex;flex-direction:column;padding:0 24px 24px;border-top:1px solid var(--gris-200)}
  .menu-movil a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--gris-200);color:var(--azul-286);font-size:20px;line-height:26px;font-weight:600;text-decoration:none}

  .hero{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:16px;padding-left:24px}
  .hero-txt{padding:0 24px 0 0}
  .sin-corte-m{white-space:nowrap}
  .onda{padding-bottom:40px}
  .onda img{width:104px}
  .acciones{margin-top:24px}
  .foto-01{justify-self:end;width:86%;height:auto;aspect-ratio:4/5}

  .cifras{flex-direction:column;gap:16px}
  .cifras li{flex-direction:row;align-items:baseline;gap:16px}
  .cifras .cifra-m{min-width:128px}

  .prob-sub{margin-top:40px}
  .razones{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
  .razon{min-height:0;gap:24px}

  .existe{grid-template-columns:minmax(0,1fr);gap:24px}

  .obt-bloque,.obt-sangre{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:64px}
  .obt-bloque.primero{margin-top:40px}
  .obt-sangre{padding-right:0}
  .obt-sangre .foto-03{order:0}
  .obt-sangre .obt-txt{padding-left:24px;padding-right:24px}
  .foto-02{justify-self:start;width:72%;height:auto;aspect-ratio:4/5}
  .foto-03{width:calc(100% - 40px);height:auto;aspect-ratio:3/2}
  .foto-04{justify-self:start;width:80%;height:auto;aspect-ratio:1/1}
  .resumen{margin-top:64px;padding-top:24px}

  .quien{grid-template-columns:minmax(0,1fr);gap:40px}
  .panel{margin-top:24px;padding:24px}
  .foto-05{justify-self:start;max-width:none}

  .banda{margin-top:64px;padding-top:64px;padding-bottom:64px}

  .metodo{grid-template-columns:minmax(0,1fr);gap:40px}
  .metodo-cab{position:static}
  .paso{grid-template-columns:72px minmax(0,1fr);gap:16px;padding-bottom:40px}

  .fundador{grid-template-columns:minmax(0,1fr);gap:40px;padding:24px}
  .foto-06{width:200px;height:250px}
  .fundador-txt .tray-cab{margin-top:24px}

  .faqs{grid-template-columns:minmax(0,1fr);gap:40px}
  .faqs-cab{position:static}
  .faq-q{min-height:64px;padding:16px;font-size:16px;line-height:24px}
  .faq-r{padding:0 16px 16px}

  .final{margin-top:64px}
  .cierre{padding-top:64px;padding-bottom:64px}
  .pie{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:40px}
  .legal{padding-bottom:40px}

  .contacto{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px}
  .calendario{height:640px}
}

/* Web estática */
body{margin:0;background:#FFFFFF}
.menu-movil[hidden],.faq-r[hidden]{display:none !important}
.e404{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:720px;margin-top:96px}
.e404 .subtitulo{text-wrap:balance}
.doc-legal{display:flex;flex-direction:column;gap:16px;max-width:720px;margin-top:96px}
.doc-legal h2{margin-top:24px}
.doc-legal ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.doc-legal li::marker{color:var(--azul-286)}
.doc-legal a{color:var(--azul-286);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.doc-legal a:hover{color:var(--azul-noche)}
@media (max-width:767px){.e404,.doc-legal{margin-top:40px}.doc-legal .h1{font-size:32px;line-height:38px}}