/* CREE-A · principal.css — Inicio, Servicios y Contacto. Va después de sitio.css. */

/* ---------- Inicio: portada ---------- */
.ini h1.hero-txt{max-width:none;margin:10px auto 0;font-size:clamp(30px,5.2vw,66px);font-weight:800;letter-spacing:-.02em;line-height:1}
.imag{font-family:var(--fsub);font-weight:400;font-style:normal;letter-spacing:0}
.hero-sub{max-width:44ch;margin:18px auto auto;padding:0 24px;text-align:center;font-size:clamp(15px,1.5vw,19px);line-height:1.45;color:rgba(241,239,232,.86);text-wrap:balance}
.js .hero-sub{opacity:0;transform:translateY(14px);transition:opacity .9s .15s var(--e),transform .9s .15s var(--e)}
.js .hero.listo .hero-sub{opacity:1;transform:none}

/* ---------- Inicio: servicios ---------- */
.serv .tj img{aspect-ratio:3/4}
.fila .btn{flex:none}
.dest .tj img{aspect-ratio:16/10}

/* Adelanto de la plataforma: tablero dibujado, sin cifras */
.tablero{display:grid;gap:18px;padding:26px;border-radius:20px;background:#F4F3EF;color:var(--tx);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.tablero .trio b{animation:none}
.tb-fila{display:grid;gap:8px}
.tb-fila span{font-family:var(--ft);font-weight:700;font-size:17px;line-height:1}
.tb-barra{height:12px;border-radius:12px;background:rgba(44,44,42,.1);overflow:hidden}
.tb-barra i{display:block;height:100%;width:var(--a);border-radius:12px;background:var(--c);transform-origin:0 50%}
.js .tablero.rv .tb-barra i{transform:scaleX(0);transition:transform 1.3s var(--e)}
.js .tablero.rv.in .tb-barra i{transform:none}
.js .tablero.rv.in .tb-fila:nth-child(3) .tb-barra i{transition-delay:.15s}
.js .tablero.rv.in .tb-fila:nth-child(4) .tb-barra i{transition-delay:.3s}
.tb-graf{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:4px}
.tb-graf i{flex:1;height:var(--a);border-radius:8px 8px 3px 3px;background:rgba(44,44,42,.16);transform-origin:50% 100%}
.tb-graf i:last-child{background:linear-gradient(0deg,#00BF63,#EF9F27,#DF3421)}
.js .tablero.rv .tb-graf i{transform:scaleY(0);transition:transform 1s var(--e)}
.js .tablero.rv.in .tb-graf i{transform:none}
.tb-graf i:nth-child(2){transition-delay:.06s}.tb-graf i:nth-child(3){transition-delay:.12s}.tb-graf i:nth-child(4){transition-delay:.18s}.tb-graf i:nth-child(5){transition-delay:.24s}.tb-graf i:nth-child(6){transition-delay:.3s}.tb-graf i:nth-child(7){transition-delay:.36s}

.bloque h2{margin-bottom:18px}
.bloque .txt{margin-bottom:26px}
.osc .btn.claro:hover{background:#fff}

/* Tres imágenes verticales escalonadas */
.tira{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:center}
.tira img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:16px;box-shadow:var(--sombra)}
.tira img:nth-child(2){transform:translateY(-26px)}
.tira img:nth-child(3){transform:translateY(14px)}
.osc .tira img{box-shadow:0 22px 50px rgba(0,0,0,.4)}

/* Una imagen grande y dos pequeñas */
.mos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mos img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:16px;box-shadow:var(--sombra)}
.mos img:first-child{grid-column:1/-1;aspect-ratio:16/9}

/* ---------- Servicios ---------- */
.port .btns{margin-top:30px}
.port .pista{margin-top:34px}
.port .btns .btn{min-width:170px}
.etqs{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 20px;font-family:var(--ft);font-weight:700;font-size:16px;line-height:1.1;color:var(--tx2)}
.etqs li{display:flex;align-items:center;gap:8px}
.etqs li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g);flex:none}
.etqs li:nth-child(3n+2)::before{width:13px;height:5px;border-radius:5px;background:var(--y)}
.etqs li:nth-child(3n)::before{border-radius:2px;background:var(--r);transform:rotate(45deg)}
.osc .etqs{color:var(--crema2)}
.sv{display:grid;gap:10px;margin:0 0 24px}
.sv li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 16px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.74);box-shadow:var(--sombra)}
.sv b{font-family:var(--ft);font-weight:700;font-size:19px;line-height:1.1}
.sv em{font-family:var(--fsub);font-style:normal;font-size:20px;line-height:1;white-space:nowrap}
.sv span{grid-column:1/-1;font-size:13.5px;line-height:1.4;color:var(--tx2)}
.serv-g h2{margin-bottom:18px;font-size:clamp(32px,3.8vw,48px)}

.planes{align-items:stretch}
.plan{display:flex;flex-direction:column;padding:12px 12px 20px;text-align:center}
.plan img{width:100%;height:clamp(96px,16svh,150px);object-fit:cover;border-radius:12px}
.plan h3{margin:16px 8px 0;font-size:24px}
.plan .val{margin:10px 0 2px;font-family:var(--fsub);font-size:clamp(30px,3vw,38px);line-height:1}
.plan .val small{font-family:var(--fbtn);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-left:6px}
.plan .list{margin:8px 8px 0;text-align:left}
.plan .list li{padding:5px 0 5px 18px;font-size:14px}
.plan .list li::before{top:12px}
.plan .txt{margin:10px 10px 0;font-size:14.5px;line-height:1.5;max-width:none}
.plan .nota{margin:10px 10px 0}
.plan .btn{margin:auto 8px 0;min-height:50px;min-width:0}
.plan .btn.tinto{min-width:0;padding:0 14px}
.plan .pie-plan{margin-top:auto;padding-top:16px;display:grid}

/* ---------- Contacto ---------- */
.hablemos{position:relative;display:grid;align-content:end;min-height:min(62svh,520px);padding:34px;border-radius:20px;overflow:hidden;color:var(--crema);isolation:isolate;box-shadow:var(--sombra)}
.hablemos img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hablemos::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(24,24,23,.2),rgba(24,24,23,.78))}
.hablemos h1{max-width:none;font-size:clamp(50px,7.4vw,104px);font-weight:800;letter-spacing:-.025em;line-height:.95}
.hablemos .merc{margin-top:14px}
.accs{display:grid;gap:18px}
.accs .acc{min-height:0;padding:30px 22px}
.cont-nota{margin-top:6px;text-align:center}

@media (max-width:1000px){
  .serv .tj img{aspect-ratio:4/3}
  .planes.rej.c3{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
  .plan img{height:130px}
}
@media (max-width:900px){
  .bloque,.serv-g .duo>div:not(.mos):not(.tira){text-align:center}
  .etqs{justify-content:center}
  .sv li{text-align:left}
  .tira{max-width:460px;margin:20px auto 10px}
  .mos{max-width:560px;margin:0 auto;width:100%}
  .dest.rej.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dest .tj:first-child{grid-column:1/-1}
  .dest .tj:first-child img{aspect-ratio:16/9}
  .hablemos{min-height:300px;padding:26px}
  .port .btns{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));display:grid;max-width:440px;margin-left:auto;margin-right:auto}
  .port .btns .btn{min-width:0}
}
@media (max-width:560px){
  .serv.rej.c4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .serv .tj{padding:8px 8px 14px}
  .serv .tj img{aspect-ratio:1/1}
  .serv .tj b{margin:12px 4px 0;font-size:17px}
  .serv .tj small{display:none}
  .serv .tj .va{right:14px;top:14px;width:30px;height:30px}
  .dest.rej{gap:10px}
  .dest .tj{padding:8px 8px 14px}
  .dest .tj b{margin:12px 4px 0;font-size:17px}
  .dest .tj small{margin:4px 4px 0;font-size:13px}
  .dest .tj .va{right:14px;top:14px;width:30px;height:30px}
  .fila .btn{width:100%}
  .tablero{padding:20px}
  .tb-graf{height:70px}
  .mos img{aspect-ratio:4/3}
  .sv li{padding:12px 14px}
  .sv b{font-size:17px}
  .sv em{font-size:18px}
  .hablemos{min-height:230px}
}
@media (prefers-reduced-motion:reduce){
  .js .hero-sub{opacity:1;transform:none;transition:none}
  .js .tablero.rv .tb-barra i,.js .tablero.rv .tb-graf i{transform:none;transition:none}
}
.pie-redes .red-c{background:var(--tinta);color:var(--crema)}
.pie-redes .red-c:hover{background:#000}


/* ===== Mosaico del inicio: imágenes grandes con el texto encima (fusión con el prototipo) ===== */
.mz{max-width:1500px;margin:0 auto;padding:6px 14px 40px;display:grid;gap:14px}
.mz-fila{display:grid;gap:14px}
.mz-fila.c4{grid-template-columns:repeat(4,1fr);--h:min(58vh,540px)}
.mz-fila.c2{grid-template-columns:repeat(2,1fr);--h:min(60vh,560px)}
.lo{position:relative;display:block;min-height:var(--h,420px);border-radius:22px;overflow:hidden;background:#202020;color:var(--crema);isolation:isolate;box-shadow:0 18px 44px rgba(32,32,32,.18)}
.lo>img,.lo>video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
a.lo:hover>img,a.lo:hover>video{transform:scale(1.05)}
.lo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,19,0) 35%,rgba(20,20,19,.86))}
.lo.arriba::after{background:linear-gradient(180deg,rgba(20,20,19,.86),rgba(20,20,19,0) 62%)}
.lo-t{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:start;gap:6px;padding:26px 28px}
.lo.arriba .lo-t{top:0;bottom:auto;padding-top:30px}
.lo-t b{font-family:var(--ft);font-weight:800;font-size:clamp(24px,2.3vw,38px);line-height:1;letter-spacing:-.01em}
.lo.gr .lo-t b{font-size:clamp(30px,3.3vw,54px)}
.lo-t small{font-size:15px;line-height:1.35;color:var(--crema2);max-width:36ch}
.lo-t .btn{margin-top:12px;pointer-events:none}
.lo-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.lo-btns .btn{pointer-events:auto;margin:0;min-width:150px}
.forma{position:absolute;left:20px;top:20px;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(32,32,32,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.forma i{display:block;width:13px;height:13px;border-radius:50%;background:var(--c)}
.forma.y i{width:22px;height:6px;border-radius:6px}
.forma.r i{border-radius:3px;transform:rotate(45deg)}
.chip2{position:absolute;right:20px;top:20px;padding:8px 14px;border-radius:999px;background:rgba(32,32,32,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--fbtn);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.seisk{position:absolute;left:26px;bottom:18px;font-family:var(--ft);font-weight:800;font-size:clamp(110px,15vw,250px);line-height:.8;letter-spacing:-.04em}
.seisk i{display:inline-block;width:.42em;height:.05em;margin-left:.06em;border-radius:1em;background:var(--grad);vertical-align:baseline}
.lo.osc2{background:#202020}
.lo.osc2::after{display:none}
.lo.osc2 .tablero{position:absolute;left:28px;right:28px;bottom:28px;display:grid;gap:14px;padding:24px;border-radius:18px;background:var(--crema);color:var(--tinta);box-shadow:none;max-width:none}
.lo.osc2 .tb-fila{display:grid;gap:7px;font-family:var(--ft);font-weight:700;font-size:15px}
.lo.osc2 .tb-barra{display:block;height:10px;border-radius:10px;background:rgba(32,32,32,.12);overflow:hidden}
.lo.osc2 .tb-barra i{display:block;height:100%;width:var(--a);border-radius:10px;background:var(--c)}
.lo.ancho{min-height:min(56vh,500px)}
.lo.ancho::after{background:linear-gradient(90deg,rgba(20,20,19,.9),rgba(20,20,19,.25) 70%)}
.lo.ancho .lo-t{top:0;align-content:center;padding:40px clamp(28px,5vw,72px)}
.lo.ancho .lo-t b{font-size:clamp(48px,6.4vw,104px)}
.lo.ancho .lo-t small{font-family:var(--fsub);font-size:clamp(18px,1.8vw,24px)}
@media (max-width:1000px){
  .mz-fila.c4{grid-template-columns:repeat(2,1fr);--h:340px}
  .mz-fila.c2{--h:380px}
}
@media (max-width:700px){
  .mz{padding:4px 10px 28px;gap:10px}
  .mz-fila{gap:10px}
  .mz-fila.c4{--h:250px}
  .mz-fila.c2{grid-template-columns:1fr;--h:320px}
  .lo{border-radius:18px}
  .lo-t{padding:18px}
  .lo-t small{font-size:13.5px}
  .forma{left:14px;top:14px;width:38px;height:38px}
  .lo.osc2 .tablero{left:18px;right:18px;bottom:18px;padding:18px}
}
@media (prefers-reduced-motion:reduce){.lo>img,.lo>video{transition:none}}
.lo.arriba::after{background:linear-gradient(180deg,rgba(20,20,19,.92),rgba(20,20,19,.5) 34%,rgba(20,20,19,0) 66%)}
.lo.dos::after{background:linear-gradient(180deg,rgba(20,20,19,.92),rgba(20,20,19,.35) 36%,rgba(20,20,19,.25) 56%,rgba(20,20,19,.88))}
.lo.ancho{margin:0;max-width:none;width:100%;color:var(--crema)}