/* PRI5MA · páginas de servicio (stands y activaciones). Se usa junto con css/base.css */

/* ---------- Encabezado de la página ---------- */
.s-heroe{position:relative;padding:150px 0 90px;overflow:hidden;isolation:isolate}
.s-heroe::before{content:"";position:absolute;right:-10%;top:-25%;width:65%;aspect-ratio:1;z-index:-1;background:radial-gradient(circle,rgba(26,167,240,.15),rgba(26,167,240,0) 62%)}
.s-heroe .envol{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.s-heroe.sin-foto .envol{grid-template-columns:1fr;max-width:980px}
.migas{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:14.5px;color:rgba(255,255,255,.6);margin-bottom:22px}
.migas a:hover{color:#fff}
.migas span[aria-hidden]{color:rgba(255,255,255,.3)}
.s-heroe h1{font-size:clamp(42px,5vw,76px);font-weight:400;letter-spacing:-.045em;line-height:1;margin-top:18px}
.s-heroe .lead{margin-top:22px;font-size:clamp(17px,1.4vw,20px);font-weight:300;color:rgba(255,255,255,.76);max-width:560px}
.s-heroe .precio-chip{display:inline-flex;align-items:baseline;gap:10px;margin-top:26px;padding:12px 18px;border-radius:16px;border:1px solid var(--linea-o);background:rgba(255,255,255,.04)}
.s-heroe .precio-chip small{color:var(--gris-c);font-size:14px}
.s-heroe .precio-chip b{font-size:26px;font-weight:500;letter-spacing:-.02em}
.s-heroe .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.s-heroe figure{margin:0;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3.6;background:#1b1e21;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.s-heroe figure img{width:100%;height:100%;object-fit:cover}
.aviso-proto{display:inline-block;margin-top:18px;font-size:12.5px;color:#e8b36a;border:1px solid rgba(232,179,106,.35);border-radius:99px;padding:4px 12px}

/* ---------- Franja de puntos clave ---------- */
.puntos{border-top:1px solid var(--linea-o);border-bottom:1px solid var(--linea-o)}
.puntos .envol{display:grid;grid-template-columns:repeat(4,1fr)}
.puntos div{padding:30px 26px;border-left:1px solid var(--linea-o)}
.puntos div:first-child{border-left:0;padding-left:0}
.puntos b{display:block;font-size:19px;font-weight:500;margin-bottom:6px}
.puntos span{font-size:15px;color:var(--gris-c)}

/* ---------- Texto corrido ---------- */
.texto{max-width:760px}
.texto p{font-size:18px;line-height:1.65;color:#3a3f44;margin-top:16px}
.texto p:first-child{margin-top:0}
.texto h3{font-size:24px;margin:34px 0 4px}
.oscuro .texto p{color:#c9cdd1}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ---------- Tabla de precios ---------- */
.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.tabla th,.tabla td{padding:18px 22px;text-align:left;border-bottom:1px solid #eee9e2;font-size:16px;vertical-align:top}
.tabla th{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a9095;font-weight:500;background:#faf8f5}
.tabla td b{font-weight:600}
.tabla td small{display:block;color:#7a8085;font-size:13.5px;margin-top:3px}
.tabla td.p{white-space:nowrap;font-size:19px;font-weight:600;text-align:right}
.tabla th:last-child{text-align:right}
.tabla tr:last-child td{border-bottom:0}
.tabla a{color:var(--cian-o);font-weight:500}
.nota-precios{margin-top:16px;font-size:14.5px;color:#62686e}

/* ---------- Incluye / no incluye ---------- */
.cajas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.caja-s{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:34px}
.caja-s h3{font-size:24px;margin-bottom:18px}
.oscuro .caja-s{background:var(--negro-2);border:1px solid var(--linea-o);box-shadow:none}
.lista-ok,.lista-no{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lista-ok li,.lista-no li{position:relative;padding-left:34px;font-size:16px}
.lista-ok li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:rgba(26,167,240,.14)}
.lista-ok li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:4px;border-left:2px solid var(--cian-o);border-bottom:2px solid var(--cian-o);transform:rotate(-45deg)}
.oscuro .lista-ok li::after{border-color:var(--cian)}
.lista-no li::before{content:"";position:absolute;left:5px;top:12px;width:12px;height:1.5px;background:#8c969c}
.caja-s .pie{margin-top:16px;font-size:14px;color:#7a8085}

/* ---------- Tarjetas (diseños, estaciones, páginas relacionadas) ---------- */
.rejilla-t{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.rejilla-t.tres{grid-template-columns:repeat(3,1fr)}
.rejilla-t.cuatro{grid-template-columns:repeat(4,1fr)}
.t-card{display:flex;flex-direction:column;background:#fff;color:var(--tinta);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.t-card:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(20,20,20,.05),0 24px 48px rgba(20,20,20,.12)}
.oscuro .t-card{background:var(--negro-2);color:var(--claro);border:1px solid var(--linea-o);box-shadow:none}
.t-card .foto{aspect-ratio:4/3.2;overflow:hidden;background:#15181b}
.t-card .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.t-card:hover .foto img{transform:scale(1.05)}
.t-card .tx{padding:20px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.t-card h3{font-size:22px;font-weight:500}
.t-card .sub{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--cian-o)}
.oscuro .t-card .sub{color:var(--cian)}
.t-card p{font-size:14.5px;color:#62686e;line-height:1.45}
.oscuro .t-card p{color:var(--gris-c)}
.t-card .pie-t{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-top:1px solid #eee9e2}
.oscuro .t-card .pie-t{border-color:var(--linea-o)}
.t-card .pie-t small{font-size:12.5px;color:#8a9095}
.t-card .pie-t b{font-size:18px;font-weight:600}
.t-card .ir{font-size:14px;font-weight:500;color:var(--cian-o);white-space:nowrap}
.oscuro .t-card .ir{color:var(--cian)}

/* ---------- Proyectos relacionados ---------- */
.rejilla-p{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rejilla-p.uno{grid-template-columns:1fr}
.rejilla-p .proy{width:auto;aspect-ratio:4/4.4}

/* ---------- Galería de fotos ---------- */
.fotos-s{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fotos-s figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/4.4;background:#1b1e21;position:relative}
.fotos-s img{width:100%;height:100%;object-fit:cover}
.fotos-s figcaption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;padding:5px 12px;border-radius:99px}

/* ---------- Pasos ---------- */
.pasos-s{list-style:none;counter-reset:p;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea-c)}
.oscuro .pasos-s{border-color:var(--linea-o)}
.pasos-s li{counter-increment:p;padding:30px 26px 6px 0}
.pasos-s li + li{padding-left:26px;border-left:1px solid var(--linea-c)}
.oscuro .pasos-s li + li{border-color:var(--linea-o)}
.pasos-s li::before{content:"0" counter(p);display:block;font-size:14px;letter-spacing:.1em;color:var(--cian-o);margin-bottom:20px}
.oscuro .pasos-s li::before{color:var(--cian)}
.pasos-s b{display:block;font-size:21px;font-weight:500;margin-bottom:8px}
.pasos-s span{font-size:15.5px;color:#62686e}
.oscuro .pasos-s span{color:var(--gris-c)}

/* ---------- Preguntas frecuentes ---------- */
.faq-g{display:grid;grid-template-columns:.8fr 1.4fr;gap:64px;align-items:start}
.faq-g h2{font-size:clamp(34px,3.6vw,50px);margin-top:18px}
.faq details{border-bottom:1px solid var(--linea-c)}
.faq details:first-child{border-top:1px solid var(--linea-c)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--linea-c);position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--tinta);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{background:var(--tinta)}
.faq details[open] summary i::before{background:#fff}
.faq details[open] summary i::after{transform:translate(-50%,-50%);background:#fff}
.faq details p{padding:0 56px 24px 0;color:#555b61;margin:0}

/* ---------- Cierre ---------- */
.s-cierre{padding:120px 0;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.s-cierre::before{content:"";position:absolute;left:50%;top:50%;width:80%;aspect-ratio:2;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(ellipse,rgba(26,167,240,.14),rgba(26,167,240,0) 65%)}
.s-cierre h2{font-size:clamp(38px,5vw,68px);font-weight:400;letter-spacing:-.04em;max-width:16ch;margin:0 auto}
.s-cierre p{margin:20px auto 0;font-size:19px;color:rgba(255,255,255,.72);font-weight:300;max-width:580px}
.s-cierre .acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}

.oscuro{background:var(--negro);color:var(--claro)}
.oscuro .cab p{color:var(--gris-c)}
.crema{background:var(--crema);color:var(--tinta)}
.crema .kicker{color:var(--cian-o)}
.crema .cab p{color:#555b61}

@media (max-width:1180px){
  .rejilla-t{grid-template-columns:repeat(3,1fr)}
  .rejilla-t.cuatro{grid-template-columns:repeat(2,1fr)}
  .puntos .envol{grid-template-columns:repeat(2,1fr)}
  .puntos div:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:900px){
  .s-heroe{padding:110px 0 60px}
  .s-heroe .envol{grid-template-columns:1fr;gap:30px}
  .s-heroe .acciones{flex-direction:column;align-items:stretch}
  .puntos .envol{grid-template-columns:1fr}
  .puntos div,.puntos div:nth-child(3){border-left:0;padding:20px 0;border-top:1px solid var(--linea-o)}
  .puntos div:first-child{border-top:0}
  .dos-col,.cajas,.faq-g{grid-template-columns:1fr;gap:28px}
  .texto p{font-size:17px}
  .tabla th,.tabla td{padding:14px 14px;font-size:15px}
  .tabla td.p{font-size:16px}
  .rejilla-t,.rejilla-t.tres,.rejilla-t.cuatro{grid-template-columns:1fr 1fr;gap:12px}
  .t-card .tx{padding:14px}
  .t-card h3{font-size:18px}
  .fotos-s{grid-template-columns:1fr 1fr}
  .rejilla-p{grid-template-columns:1fr}
  .pasos-s{grid-template-columns:1fr 1fr;border-top:0}
  .pasos-s li,.pasos-s li + li{padding:22px 14px 18px 0;border-left:0;border-top:1px solid var(--linea-c)}
  .pasos-s li:nth-child(even){padding-left:14px;border-left:1px solid var(--linea-c)}
  .faq summary{font-size:17px}
  .faq details p{padding-right:0}
  .s-cierre{padding:90px 0}
  .s-cierre .acciones{flex-direction:column;align-items:stretch}
}
@media (max-width:560px){
  .rejilla-t,.rejilla-t.tres,.rejilla-t.cuatro{grid-template-columns:1fr}
  .tabla thead{display:none}
  .tabla tr{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid #eee9e2}
  .tabla td{border:0}
  .tabla td:nth-child(2){grid-column:1/-1;order:3;padding-top:0}
}

/* ---------- Blog ---------- */
.art-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:22px;font-size:15px;color:var(--gris-c)}
.art-meta span + span::before{content:"·";margin-right:14px;color:rgba(255,255,255,.3)}
.art{max-width:760px;margin:0 auto}
.art > * + *{margin-top:20px}
.art p,.art li{font-size:18px;line-height:1.7;color:#30353a}
.art h2{font-size:clamp(28px,2.8vw,38px);margin-top:56px;letter-spacing:-.025em;line-height:1.12}
.art h3{font-size:22px;margin-top:34px}
.art ul,.art ol{padding-left:22px;display:grid;gap:10px}
.art a{color:var(--cian-o);text-decoration:underline;text-underline-offset:3px}
.art strong{color:var(--tinta)}
.art .tabla{margin-top:26px}
.art .tabla td,.art .tabla th{font-size:15.5px}
.art .nota{font-size:14.5px;color:#6a7075;line-height:1.55}
.art figure{margin:30px 0 0;border-radius:18px;overflow:hidden}
.art figure img{width:100%;height:auto}
.art figcaption{font-size:14px;color:#6a7075;padding-top:8px}
.indice{background:#fff;border-radius:18px;box-shadow:var(--sombra);padding:24px 28px}
.indice b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8a9095;font-weight:500;margin-bottom:10px}
.indice ol{margin:0;padding-left:20px;display:grid;gap:6px}
.indice li{font-size:16px;line-height:1.45}
.art .indice a{text-decoration:none}
.cta-art{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--tinta);color:#fff;border-radius:20px;padding:26px 28px;margin-top:40px}
.cta-art b{display:block;font-size:21px;font-weight:500}
.cta-art span{font-size:15px;color:rgba(255,255,255,.7)}
.art .cta-art a.btn{color:var(--tinta);text-decoration:none;height:50px;padding:0 22px;font-size:15.5px}
.fuentes{margin-top:48px;padding-top:24px;border-top:1px solid var(--linea-c)}
.fuentes p,.fuentes li{font-size:14px;color:#6a7075;line-height:1.55}
.art-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);color:var(--tinta);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.art-card:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(20,20,20,.05),0 24px 48px rgba(20,20,20,.12)}
.art-card .foto{aspect-ratio:16/10;overflow:hidden;background:#15181b}
.art-card .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.art-card:hover .foto img{transform:scale(1.05)}
.art-card .tx{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.art-card small{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cian-o);font-weight:500}
.art-card h3{font-size:22px;font-weight:500;line-height:1.2}
.art-card p{font-size:15px;color:#62686e;line-height:1.5}
.art-card .ir{margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:500;color:var(--cian-o)}
@media (max-width:1000px){.art-lista{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .art p,.art li{font-size:17px}
  .art h2{margin-top:44px}
  .cta-art{padding:22px}
  .cta-art a.btn{width:100%}
}
@media (max-width:600px){.art-lista{grid-template-columns:1fr}}