/* portada.css · secciones exclusivas de la portada (hero, servicios, proceso, contacto). Tokens y cabecera en public.css. */
/* ── Tokens de marca (mismos que css/ei.css) ── */
/* Botones: un primario por sección */
/* Header */
/* Hero con animación de registro de tintas */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--g50) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;min-height:min(78vh,720px);padding-top:56px;padding-bottom:56px}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--amarillo);color:var(--tinta);font-weight:600;font-size:14px;padding:6px 12px 6px 8px;border-radius:999px;margin-bottom:18px}
.tag i{width:10px;height:10px;border-radius:50%;background:var(--tinta);animation:pulse 1.6s ease-in-out infinite}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem)}.hero h1 span{color:var(--azul)}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--g700);max-width:52ch;margin:18px 0 28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__note{margin-top:22px;font-size:14px;color:var(--g500)}
.urgbox{margin-top:24px;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--amarillo);background:#FFFBE0;border-radius:14px;max-width:560px}.urgbox__tag{flex:none;background:var(--amarillo);color:var(--tinta);font-weight:700;font-size:13px;padding:5px 10px;border-radius:999px;white-space:nowrap}.urgbox p{font-size:14.5px;color:var(--g700)}.urgbox b{color:var(--tinta)}
@media(max-width:520px){.urgbox{flex-direction:column;gap:8px}}
.press{position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto;width:100%}
.ink{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;mix-blend-mode:multiply;will-change:transform;filter:saturate(1.05)}
.ink--c{background:var(--cian);left:4%;top:8%;animation:orbitA 14s ease-in-out infinite}
.ink--m{background:var(--magenta);right:4%;top:16%;animation:orbitB 16s ease-in-out infinite}
.ink--y{background:var(--amarillo);left:22%;bottom:2%;animation:orbitC 18s ease-in-out infinite}
.press__e{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(9rem,26vw,15rem);color:#fff;line-height:1;letter-spacing:-.06em;text-shadow:0 2px 0 rgba(0,0,0,.05);animation:float 6s ease-in-out infinite;user-select:none}
.reg{position:absolute;width:22px;height:22px;border:2px solid var(--g300);border-radius:50%;opacity:.7}
.reg::before,.reg::after{content:"";position:absolute;background:var(--g300)}.reg::before{left:50%;top:-6px;width:2px;height:30px;margin-left:-1px}.reg::after{top:50%;left:-6px;height:2px;width:30px;margin-top:-1px}
.reg--1{left:-2px;top:-2px}.reg--2{right:-2px;bottom:-2px}
@keyframes orbitA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,6%) scale(1.06)}}
@keyframes orbitB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,7%) scale(1.04)}}
@keyframes orbitC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-9%) scale(1.07)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes stripes{to{background-position:56px 0}}
.progress{display:none}
@media(prefers-reduced-motion:reduce){.ink,.press__e,.tag i,.progress{animation:none}}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:36px;padding-bottom:40px;min-height:0}.press{max-width:300px;order:-1}.hero__cta .btn{flex:1 1 100%}}
/* Servicios */
.band{padding:72px 0}.band--alt{background:var(--g50)}
.band__head{max-width:62ch;margin-bottom:34px}.band__head p{color:var(--g700);margin-top:10px;font-size:1.05rem}
.eyebrow{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta-text);margin-bottom:10px;display:block}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc .card{background:#fff;border:1px solid var(--g200);border-radius:var(--radius);padding:22px;transition:transform .2s,border-color .2s,box-shadow .2s}
.svc .card:hover{transform:translateY(-3px);border-color:var(--azul);box-shadow:0 12px 30px rgba(0,79,159,.08)}
.svc .card__ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:var(--azul-soft);color:var(--azul)}
.svc .card__ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc .card p{color:var(--g700);font-size:15px;margin-top:6px}
.svc .card:nth-child(4n+2) .svc .card__ico{background:#FDE6F2;color:var(--magenta-text)}.svc .card:nth-child(4n+3) .svc .card__ico{background:#E0F3FC;color:#006FA3}.svc .card:nth-child(4n) .svc .card__ico{background:#FFF9C2;color:#5c5200}
@media(max-width:1000px){.svc{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.svc{grid-template-columns:1fr}.band{padding:52px 0}}
/* Proceso */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{position:relative;padding:22px 22px 22px 22px;background:#fff;border-radius:var(--radius);border:1px solid var(--g200)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:2rem;color:var(--azul);display:block;margin-bottom:8px;line-height:1}
.step p{color:var(--g700);font-size:15px;margin-top:6px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* Contacto */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:stretch}
.contact__card{background:var(--azul);color:#fff;border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.contact__card h2{color:#fff}.contact__card p{color:#d6e4f7}
.contact__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.contact__list li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--g200);border-radius:12px;padding:14px 16px}
.contact__list svg{width:22px;height:22px;flex:none;stroke:var(--azul);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.contact__list b{display:block;font-size:14px;color:var(--g500);font-weight:600}
.contact__list a{color:var(--azul);font-weight:600;text-decoration:none}.contact__list a:hover{text-decoration:underline}
.mapa{grid-column:1/-1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--g200);background:var(--g100);position:relative}.mapa iframe{display:block;width:100%;height:320px;border:0}.mapa a{position:absolute;right:12px;bottom:12px;background:#fff;color:var(--azul);font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.15)}
@media(max-width:820px){.contact{grid-template-columns:1fr}.mapa iframe{height:240px}}
/* Footer */

/* Portada real (2026-09-29): categorías, destacados, Ely */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.cats .pcard__b p{color:var(--g700);font-size:14px}@media(max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.cats{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:16px}.feat__a{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--radius);text-decoration:none;color:inherit;border:1px solid var(--g200);background:#fff;transition:transform .2s,box-shadow .2s}.feat__a:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.feat__a--urg{background:#FFFBE0;border-color:var(--amarillo)}.feat__a h3{font-size:var(--fs-4)}.feat__a p{color:var(--g700)}.feat__a--web{background:var(--azul);color:#fff}.feat__a--web p{color:#d6e4f7}.feat__tag{font:700 13px var(--ui);letter-spacing:.06em;text-transform:uppercase}.feat__link{font-weight:700;margin-top:auto}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.ely{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:26px 28px;border:1px solid var(--g200);border-radius:var(--radius);background:var(--g50)}.ely p{color:var(--g700);margin-top:6px}@media(max-width:820px){.ely{grid-template-columns:1fr;text-align:center;justify-items:center}}