/* CAELUS · página de inicio. Solo lo propio de esta página; el sistema está en caelus.css.
   Secciones alternadas: portada + quiz (slate) · El modelo (paper) · Servicios (slate)
   · Qué nos diferencia (paper) · Socios (slate) · Clientes (paper) · Contacto (slate). */

section{padding-block:clamp(4.5rem, 9vw, 7.5rem)}
.eyebrow{border-bottom:0;padding-bottom:0;margin-bottom:1rem}

/* --- portada --- */
.hero{padding-block:clamp(5.5rem, 13vw, 10rem) clamp(3rem, 6vw, 4.5rem)}
.hero .filete{margin-bottom:2rem}
.hero .eyebrow{border:none;padding:0;margin-bottom:0.9rem;color:var(--stone)}
.hero h1{font-size:clamp(2.6rem, 6.2vw, 4.5rem);max-width:16ch;margin-bottom:1.9rem}
.hero p.lead{color:rgba(230,232,229,0.82);margin-bottom:2.6rem}
.hl-hero{color:var(--ochre-light);white-space:nowrap}

/* --- destacado: pieza de campaña (quiz) ---
   Sigue a la portada sobre el mismo slate, en un recuadro con filete ochre y los
   mellizos rotando a la derecha (mismo tratamiento de las ilustraciones que en el quiz). */
.featured{padding-block:0 clamp(4rem, 8vw, 6rem)}
.feat-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2rem clamp(2rem, 5vw, 4rem);
  align-items:center;border:1px solid var(--ochre-light);border-top:3px solid var(--ochre-light);
  padding:clamp(2rem, 4.5vw, 3.6rem);background:var(--slate);
  box-shadow:0 0 40px rgba(194,177,120,0.12);
}
.feat-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;min-width:0}
.feat-copy .label{font-weight:600;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ochre-light)}
.feat-title{font-size:clamp(2.2rem, 4.8vw, 3.6rem);line-height:1.08;max-width:14ch}
.feat-copy p{color:var(--on-slate-strong);font-size:1.08rem;max-width:44ch;margin-bottom:0.6rem}
.glow{font-style:italic;color:var(--ochre-light)}
.btn-ochre{background:var(--ochre-light);border-color:var(--ochre-light);color:var(--slate-deep)}
.btn-ochre:hover,.btn-ochre:focus-visible{background:transparent;color:var(--ochre-light)}
/* todas las figuras comparten la misma celda; main.js enciende una a la vez */
.feat-art{position:relative;display:grid;width:100%;max-width:24rem;justify-self:center}
.myth{grid-area:1 / 1;margin:0;display:flex;justify-content:center;opacity:0;transition:opacity 1.2s ease}
.myth.on{opacity:1}
.myth img{
  display:block;aspect-ratio:4 / 5;width:auto;height:auto;max-width:100%;max-height:24rem;object-fit:cover;
  mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 44%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 62% at 50% 44%, #000 55%, transparent 100%);
}

/* --- el modelo --- */
.statement{font-family:var(--serif);font-size:clamp(1.4rem, 2.6vw, 1.9rem);line-height:1.35;max-width:28ch;color:var(--slate)}
.statement .hl-line{display:block;margin-top:0.5em}
.statement .hl{color:var(--ochre-deep);white-space:nowrap}
.prose .statement-sub{margin-top:0.9rem;font-size:1.05rem}

/* --- servicios (sobre slate) --- */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--on-slate-line);margin-bottom:3.2rem}
.offers article{background:var(--slate-deep);padding:2.3rem 2.1rem;display:flex;flex-direction:column;gap:0.9rem}
.offers .offer-kind{font-weight:600;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ochre-light)}
.offers h3{font-size:1.7rem}
.offers p{font-size:1rem;color:var(--on-slate-strong)}
.areas-label{display:block;font-weight:500;font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ochre-light);margin-bottom:1.2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--on-slate-line)}
.grid-4 .cell{background:var(--slate-deep);padding:2rem 1.8rem}
.grid-4 .cell h4{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:0.7rem;min-height:2.5em}
.grid-4 .cell p{font-size:0.94rem;color:var(--on-slate-strong);max-width:none}

/* --- qué nos diferencia (sobre paper) --- */
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.cols-4 article{padding:1.6rem 1.4rem 1.8rem;border-top:1px solid var(--stone)}
.cols-4 h3{font-size:1.35rem;margin-bottom:0.8rem;max-width:16ch;min-height:3.3em}
.cols-4 p{color:var(--muted);font-size:0.96rem}

/* --- socios --- */
.track{display:flex;flex-direction:column;gap:1.6rem;padding:1.8rem 0;margin-bottom:2.6rem;border-top:1px solid var(--on-slate-line);border-bottom:1px solid var(--on-slate-line)}
.track-row{display:grid;grid-template-columns:10rem minmax(0,1fr);align-items:baseline;gap:0.6rem 1.5rem}
.track-label{font-weight:600;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ochre-light)}
.track-list{list-style:none;display:flex;flex-wrap:wrap;gap:0.7rem 0}
.track-list li{font-family:var(--serif);font-size:clamp(0.95rem, 1.3vw, 1.05rem);letter-spacing:0.08em;text-transform:uppercase;color:var(--paper)}
.track-list li:not(:last-child)::after{content:"·";margin:0 0.75rem;color:var(--ochre-light)}
.partners{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(198,204,198,0.22)}
.partners article{background:var(--slate);padding:2.4rem 2.1rem}
.role{font-weight:600;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ochre);display:block;margin-bottom:1rem}
.p-name{font-family:var(--serif);font-size:1.7rem;line-height:1.15;margin-bottom:1.1rem;transition:color .25s ease}
.partners p{color:rgba(230,232,229,0.8);font-size:0.95rem;margin-bottom:1.4rem;max-width:44ch}
.mail{display:inline-block;margin:0 1.4rem 0.6rem 0;font-family:var(--mono);font-size:0.85rem;letter-spacing:0.01em;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(230,232,229,0.4);padding-bottom:2px;transition:border-color .18s}
.li-link{font-weight:500;font-size:0.85rem;letter-spacing:0.04em;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(230,232,229,0.4);padding-bottom:2px;transition:border-color .18s}
.mail:hover,.mail:focus-visible,.li-link:hover,.li-link:focus-visible{border-color:var(--paper)}

/* --- clientes: una fila a todo el ancho; main.js baraja los nombres y repone los puntos --- */
.clients-strip{padding-block:3.2rem}
.clients-strip .label{display:block;font-weight:500;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ochre-deep);margin-bottom:1.1rem}
.clients-row{display:flex;justify-content:space-between;align-items:baseline;gap:0.6rem 0.5rem}
.clients-row .c{font-family:var(--serif);font-size:clamp(0.78rem, 1.75vw, 1.4rem);letter-spacing:0.08em;text-transform:uppercase;white-space:nowrap;color:var(--slate)}
.clients-row .sep{color:var(--ochre)}

/* --- cajas que se levantan al pasar el cursor, con filete ochre arriba --- */
.offers article,.grid-4 .cell,.cols-4 article,.partners article{position:relative;transition:background .25s ease, box-shadow .25s ease, transform .25s ease}
.offers article::before,.grid-4 .cell::before,.cols-4 article::before,.partners article::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ochre-light);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.cols-4 article::before{top:-1px;background:var(--ochre)}
@media (hover:hover){
  .offers article:hover,.grid-4 .cell:hover{background:#3f505b;box-shadow:0 12px 30px rgba(0,0,0,0.25);transform:translateY(-3px);z-index:1}
  .partners article:hover{background:var(--slate-deep);box-shadow:0 12px 30px rgba(0,0,0,0.22);transform:translateY(-3px);z-index:1}
  .cols-4 article:hover{background:var(--surface);box-shadow:0 10px 28px rgba(43,55,63,0.12);transform:translateY(-3px);z-index:1}
  .offers article:hover::before,.grid-4 .cell:hover::before,.cols-4 article:hover::before,.partners article:hover::before{transform:scaleX(1)}
  .offers article:hover h3,.grid-4 .cell:hover h4,.partners article:hover .p-name{color:var(--ochre-light)}
  .cols-4 article:hover h3{color:var(--ochre-deep)}
}

@media (max-width:900px){
  .feat-card{grid-template-columns:1fr}
  .feat-art{max-width:20rem}
  .offers,.partners{grid-template-columns:1fr}
  .grid-4,.cols-4{grid-template-columns:1fr 1fr}
  .cols-4{gap:1rem}
  .grid-4 .cell h4,.cols-4 h3{min-height:0}
  .clients-row{column-gap:0.5rem}
  .clients-row .c{letter-spacing:0.05em}
}
@media (max-width:620px){
  .myth img{max-height:15rem}
  .grid-4,.cols-4{grid-template-columns:1fr}
  .track-row{grid-template-columns:1fr}
  .clients-row{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem 1.5rem}
  .clients-row .sep{display:none}
  .clients-row .c{font-size:1rem}
}