/* ============================================================
   ONCE DIGITAL · pages.css
   Services (zigzag S1) · Projects (masonry + ruta + lightbox)
   · Contact (tarjetas + mapa + form)
   ============================================================ */

/* ============================ SERVICES ============================ */

/* S② eliminado (0704-e §4): el cuerpo abre directo tras el banner, sin banda de chips */

/* S③ · unidades zigzag (degradado de esencia hacia el cierre del bloque)
   BRECHA COMPACTA (0704-g §4): sin doble section-pad banner→primer servicio */
.svc{
  background:linear-gradient(180deg,var(--paper) 0%,var(--ivory) 100%);
  padding-block:clamp(1.4rem,2.6vw,2.8rem) clamp(2.4rem,4vw,4.5rem);
}
.svc .svc-unit:first-child{padding-top:clamp(1rem,2vw,2rem)}
.svc--b{background:linear-gradient(180deg,var(--ivory) 0%,var(--paper) 100%)}
.svc-unit{
  position:relative;
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(2.8rem,5vw,4.5rem) 0;border-bottom:1px solid var(--hairline);
}
.svc-unit:last-child{border-bottom:0}
.svc-unit:nth-child(even) .svc-media{order:2}
.svc-media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -34px rgba(20,22,26,.45)}
.svc-media img{position:relative;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.svc-copy{position:relative;padding:0 .2rem}
.svc-ghost{
  position:absolute;top:-1.4rem;right:0;z-index:0;
  font-family:var(--font-display);font-weight:700;font-size:clamp(3.6rem,7vw,6.4rem);
  line-height:1;color:transparent;-webkit-text-stroke:1px rgba(20,22,26,.12);user-select:none;
}
/* h2 (jerarquía SEO 0704-k · T2: banner h1 → unidad h2 → specs h3) */
.svc-copy h2{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,3.2vw,2.7rem);letter-spacing:-.015em;line-height:1.08;max-width:16ch;
}
.svc-pitch{color:var(--text);margin-top:.9rem;max-width:44ch}
/* Especificaciones estructuradas (0704-e §4): dos columnas con hairline superior
   "Qué incluye" + "Cómo funciona", y fila "Entrega" con chips de formatos */
.svc-specs{
  margin-top:1.4rem;display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(1.2rem,2vw,1.8rem);
  border-top:1px solid var(--hairline);padding-top:1.2rem;
}
.spec-h{
  font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:.7rem;
}
.spec-inc{display:grid;gap:.5rem}
.spec-inc li{position:relative;padding-left:1.1rem;font-size:.88rem;line-height:1.45;color:var(--text)}
.spec-inc li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.spec-how{display:grid;gap:.7rem;align-content:start}
.spec-how li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:.88rem;line-height:1.45;color:var(--text)}
.spec-how b{
  font-family:var(--font-mono);font-weight:700;font-size:.64rem;color:var(--accent-deep);
  width:1.45rem;height:1.45rem;border:1px solid var(--hairline);border-radius:50%;
  display:inline-grid;place-items:center;transform:translateY(.1em);
}
.svc-deliver{
  margin-top:1.2rem;border-top:1px solid var(--hairline);padding-top:1rem;
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.svc-deliver .spec-h{margin-bottom:0}
.spec-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.spec-chips li{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--hairline);border-radius:999px;
  padding:.34rem .78rem;background:rgba(255,255,255,.55);
}
@media (max-width:560px){.svc-specs{grid-template-columns:1fr}}
.svc-cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-family:var(--font-display);font-weight:600;color:var(--accent-deep);
  border-bottom:1px solid var(--accent);padding-bottom:.25rem;
}
@media (max-width:900px){
  .svc-unit{grid-template-columns:1fr;gap:1.6rem}
  .svc-unit:nth-child(even) .svc-media{order:0}
}

/* S④ · Cómo trabajamos: números monumento (banda oscura), DIVISOR entre unidades
   4 y 5 (0704-g §6) con flechas curvas doodle que se dibujan al entrar */
.method{
  background:var(--ink);color:var(--on-dark);position:relative;overflow:clip;
  padding-block:clamp(3.2rem,5vw,5.5rem);
}
.m-arrow{
  position:absolute;z-index:3;top:-1.4rem;width:clamp(70px,7.5vw,120px);height:auto;
  pointer-events:none;overflow:visible;
}
.m-arrow-1{left:calc(25% - clamp(42px,4.4vw,70px))}
.m-arrow-2{left:calc(50% - clamp(42px,4.4vw,70px))}
.m-arrow-3{left:calc(75% - clamp(42px,4.4vw,70px))}
.m-arrow--flip{transform:scaleY(-1);top:-.4rem}
.m-arrow path{
  fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.m-arrow .ma-line{opacity:.92} /* el dash lo fija GSAP (dasharray=length → dashoffset→0) */
@media (max-width:900px){.m-arrow{display:none}}
.method .method-ghost{
  position:absolute;left:50%;top:8%;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:700;font-size:min(20vw,340px);
  color:transparent;-webkit-text-stroke:1px rgba(237,234,224,.05);white-space:nowrap;user-select:none;pointer-events:none;
}
.method-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2.6rem,4vw,4rem);position:relative;z-index:2;
}
.method-step{position:relative;padding-top:1.2rem}
.method-step::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--hairline-dark)}
.method-step i{
  position:absolute;left:0;top:0;width:34%;height:1px;background:var(--accent);transform-origin:left;
}
.method-step b{
  font-family:var(--font-display);font-weight:700;color:var(--accent);
  font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1;letter-spacing:-.02em;
}
.method-step h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);margin-top:.8rem}
.method-step p{color:var(--on-dark-muted);font-size:.92rem;margin-top:.4rem;max-width:24ch}
@media (max-width:900px){.method-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.method-grid{grid-template-columns:1fr}}

/* ============================ PROJECTS ============================ */
.gallery{background:linear-gradient(180deg,var(--paper) 0%,var(--ivory) 100%)}
.gallery--alt{background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-2) 100%)}
.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.gallery-note{font-size:.85rem;color:var(--muted);max-width:44ch}

/* Filtros */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,2.5vw,2.2rem)}
.filters button{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hairline);border-radius:999px;padding:.5rem 1.05rem;color:var(--text);
  transition:background-color .25s,color .25s,border-color .25s;
}
.filters button:hover{border-color:var(--accent);color:var(--accent-deep)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}

/* MASONRY POR COLUMNAS (0704-k · T5): cada foto se muestra COMPLETA a su ratio
   intrínseco (width 100% + height auto, cero object-fit:cover). La variedad viene
   de las orientaciones (1200×896 vs 896×1200) y de la escala de columna por galería:
   G1 protagonista = 3 columnas anchas · G2 muro denso = 4 columnas apretadas */
.mas{columns:3;column-gap:clamp(.7rem,1.4vw,1.2rem)}
.tile{
  position:relative;border-radius:14px;overflow:hidden;
  break-inside:avoid;margin-bottom:clamp(.7rem,1.4vw,1.2rem);
}
.tile-btn{display:block;width:100%;position:relative;cursor:zoom-in}
.tile img{width:100%;height:auto;will-change:transform}
.tile::after{
  content:"";position:absolute;inset:0;border-radius:14px;
  box-shadow:inset 0 0 0 2px var(--accent);opacity:0;transition:opacity .3s;pointer-events:none;
}
.tile:hover::after,.tile:focus-within::after{opacity:1}
.tile-tag{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(16,18,22,.62);color:var(--on-dark);border-radius:999px;padding:.3rem .7rem;
  pointer-events:none;
}
/* tiles sin foto: peso visual fijo 4:3 (nunca dos tiles de acento juntos, 0704-g §4) */
.tile--brand{
  aspect-ratio:4/3;background:var(--accent);display:grid;place-content:center;gap:.3rem;text-align:center;padding:1rem;
}
.tile--brand b{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3.4rem);color:#fff;line-height:1}
.tile--brand small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tile--quote{
  aspect-ratio:4/3;background:var(--ink-2);display:grid;place-content:center;padding:1.4rem;text-align:center;
}
.tile--quote p{font-family:var(--font-display);font-weight:600;font-size:clamp(.95rem,1.5vw,1.25rem);color:var(--on-dark);line-height:1.4;max-width:22ch}
.tile--quote p em{color:var(--accent)}
.tile.is-hidden{display:none}
/* G2 · muro denso: patrón DISTINTO (columnas más finas, gap apretado) */
.mas--dense{columns:4;column-gap:clamp(.5rem,1vw,.9rem)}
.mas--dense .tile{margin-bottom:clamp(.5rem,1vw,.9rem)}
@media (max-width:900px){
  .mas{columns:2}
  .mas--dense{columns:3}
}
@media (max-width:560px){
  .mas{columns:1}
  .mas--dense{columns:2}
}
/* BENTO G1 RESTAURADO (0704-m): el grid 12-col original que aprobó el dueño
   (0704-k lo cambió a masonry por error de alcance; aquí vuelve idéntico).
   Cover moderado APROBADO en G1; la foto completa vive en el lightbox.
   G2 (.mas--dense) sigue en masonry por columnas y NO se toca. */
.mas--bento{columns:auto;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(120px,16vw,240px);gap:clamp(.7rem,1.4vw,1.2rem);grid-auto-flow:dense}
.mas--bento .tile{grid-column:span 4;margin-bottom:0}
.mas--bento .tile-btn{height:100%}
.mas--bento .tile img{height:100%;object-fit:cover}
.mas--bento .tile--w8{grid-column:span 8;grid-row:span 2}
.mas--bento .tile--t3{grid-row:span 2}
.mas--bento .tile--brand{aspect-ratio:auto}
@media (max-width:900px){
  .mas--bento{grid-auto-rows:clamp(110px,22vw,180px)}
  .mas--bento .tile{grid-column:span 6}
  .mas--bento .tile--w8{grid-column:span 12}
}
@media (max-width:560px){
  .mas--bento .tile{grid-column:span 12}
  .mas--bento .tile--t3{grid-row:span 2}
}

/* Ruta de círculos R1
   PASOS COMPACTOS (0704-i §5) + PRESUPUESTO DE AIRE 0704-j §1 (ronda 0704-k · T6):
   aire total galería↔ruta ≈ 100px @1440 (medido: antes 129.6px por lado) */
.route{background:var(--ivory);position:relative;overflow:clip;padding-block:clamp(2.4rem,3.4vw,3.8rem)}
.gallery:not(.gallery--alt){padding-bottom:clamp(2.6rem,3.6vw,4.2rem)}
.gallery--alt{padding-top:clamp(2.6rem,3.6vw,4.2rem)}
.route-map{
  position:absolute;inset:-8% 0;pointer-events:none;will-change:transform;
  background-image:radial-gradient(rgba(20,22,26,.1) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 100%);
}
.route-steps{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(2rem,3.5vw,3rem);align-items:start;
}
.route-path{position:absolute;inset:0;z-index:1;pointer-events:none}
.route-path path{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 9;fill:none;opacity:.6}
.route-step{position:relative;display:grid;justify-items:center;text-align:center;gap:.9rem}
.route-step:nth-child(2),.route-step:nth-child(3){margin-top:clamp(20px,3vw,44px)}
.route-circle{
  position:relative;width:clamp(150px,15vw,240px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;gap:.4rem;padding:1.2rem;text-align:center;
  will-change:transform;
}
.route-step:nth-child(odd) .route-circle{background:var(--ink);color:var(--on-dark)}
.route-step:nth-child(even) .route-circle{background:var(--accent);color:#fff}
.route-circle h3{font-family:var(--font-display);font-weight:600;font-size:clamp(.95rem,1.4vw,1.2rem);line-height:1.2}
.route-circle svg{width:30px;height:30px;margin-inline:auto;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.9}
.route-badge{
  position:absolute;top:4%;right:2%;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--paper);color:var(--ink);border:1px solid var(--hairline);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.72rem;
  box-shadow:0 10px 22px -12px rgba(20,22,26,.5);
}
.route-step p{font-size:.88rem;color:var(--muted);max-width:22ch}
@media (max-width:900px){
  .route-steps{grid-template-columns:1fr 1fr}
  .route-step:nth-child(2),.route-step:nth-child(3){margin-top:0}
  .route-path{display:none}
}
@media (max-width:560px){.route-steps{grid-template-columns:1fr}}

/* Lightbox accesible */
.lightbox{
  position:fixed;inset:0;z-index:150;display:none;
  background:rgba(13,15,19,.9);
}
.lightbox.is-open{display:grid;place-items:center}
.lightbox figure{position:relative;width:min(92vw,1100px);max-height:86vh;display:grid;gap:.8rem}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;border-radius:10px}
.lightbox figcaption{text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.lb-close,.lb-prev,.lb-next{
  position:absolute;z-index:2;width:2.9rem;height:2.9rem;border-radius:50%;
  background:rgba(237,234,224,.1);border:1px solid var(--hairline-dark);color:var(--on-dark);
  display:grid;place-items:center;font-size:1.05rem;
  transition:background-color .25s;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--accent)}
.lb-close{top:-3.6rem;right:0}
.lb-prev{left:-1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:-1rem;top:50%;transform:translateY(-50%)}
@media (max-width:700px){
  .lb-prev{left:.4rem}.lb-next{right:.4rem}
  .lb-close{top:auto;bottom:-3.6rem;right:calc(50% - 1.45rem)}
}

/* ============================ CONTACT ============================ */

/* K1 · tres tarjetas solapando el banner
   GLASS SÓLIDO (0704-e §3): fondo casi opaco .88 + blur; el fondo se INSINÚA, no se ve a través
   Solape medido (0704-e §3): -28px para NO chocar con el H1 del banner (~24-40px de aire)
   RITMO COMPACTO (0704-c §7): 2.5rem hacia el mapa/form, no un section-pad entero */
.kcards{background:var(--paper);padding-bottom:0}
.kcards-grid{
  display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:clamp(1rem,2vw,1.6rem);
  max-width:1440px;margin-inline:auto;
  transform:translateY(-28px);
  margin-bottom:calc(2.5rem - 28px);
}
.kcard{
  display:grid;gap:.4rem;align-content:start;
  background:rgba(255,255,255,.93); /* 0704-f §2e: sin backdrop-filter; glass sólido 0704-e §3 */
  border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);
  padding:clamp(1.4rem,2.4vw,2rem);position:relative;will-change:transform;
  box-shadow:0 36px 80px -32px rgba(6,16,26,.62);
}
/* la azul del teléfono también sube a opaco pleno (gradiente de acento sólido) */
.kcard--phone{
  background:linear-gradient(165deg,#4F9BC0 0%,var(--accent) 46%,#3B7DA0 100%);
  border-color:rgba(255,255,255,.55);color:#fff;
}
.kcard svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.6;margin-bottom:.5rem;color:var(--accent-deep)}
.kcard--phone svg{color:#fff}
.kcard .kc-eyebrow{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.kcard--phone .kc-eyebrow{color:rgba(255,255,255,.8)}
.kcard .kc-data{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.kcard--phone .kc-data{color:#fff}
.kcard .kc-micro{font-size:.88rem;color:var(--muted)}
.kcard--phone .kc-micro{color:rgba(255,255,255,.85)}
.kcard .kc-chip{
  justify-self:start;margin-top:.6rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.35rem .8rem;color:#fff;
}
@media (max-width:900px){
  .kcards-grid{grid-template-columns:1fr;transform:translateY(-16px);margin-bottom:calc(2.5rem - 16px)}
}

/* K2 · card sobre banda ink */
.ksplit{position:relative;background:var(--paper);padding:0 var(--inset) var(--space-section)}
.ksplit::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:var(--ink-2);
}
.ksplit-inner{
  position:relative;z-index:2;max-width:1440px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,4vw,4rem);
  align-items:stretch;padding-top:clamp(1.2rem,2vw,1.8rem);
}
.kmap{display:grid;gap:1.2rem;align-content:start;color:var(--on-dark)}
.kmap h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.015em;line-height:1.1}
.kmap h2 em{color:var(--accent)}
.kmap p{color:var(--on-dark-muted);max-width:44ch}
.kmap-frame{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--hairline-dark)}
/* MAPA A COLOR (0704-f §4) + FACHADA LAZY (0704-g §2): el iframe carga src al click */
.kmap-frame iframe{width:100%;height:100%;border:0;background:#16283A}
.kmap-cover{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.55rem;
  background:radial-gradient(120% 130% at 50% 38%, #24455F 0%, #1A3A52 55%, #12283C 100%);
  cursor:pointer;overflow:hidden;
  transition:opacity .35s var(--ease-house);
}
.kmap-cover.is-off{opacity:0;pointer-events:none}
.kmap-cover .kmc-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(191,220,236,.28) 1.2px, transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 40%,transparent 100%);
  mask-image:radial-gradient(80% 80% at 50% 45%,#000 40%,transparent 100%);
}
.kmap-cover .kmc-ring{
  position:absolute;left:50%;top:41%;width:120px;height:120px;translate:-50% -50%;
  border:1px solid rgba(71,145,181,.4);border-radius:50%;
  box-shadow:0 0 0 26px rgba(71,145,181,.07),0 0 0 56px rgba(71,145,181,.04);
}
.kmap-cover .kmc-pin{
  position:relative;width:44px;height:44px;stroke:var(--accent);fill:rgba(71,145,181,.28);
  stroke-width:1.6;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));
}
.kmap-cover .kmc-city{position:relative;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--on-dark)}
.kmap-cover .kmc-label{
  position:relative;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);
  background:rgba(16,18,22,.72);border:1px solid var(--hairline-dark);border-radius:999px;padding:.62rem 1.2rem;margin-top:.35rem;
  transition:background-color .25s,border-color .25s;
}
.kmap-cover:hover .kmc-label{background:var(--accent);border-color:var(--accent)}
.kform{
  background:var(--paper);border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.6rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
  display:grid;gap:1.15rem;align-content:start;
}
.kform h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.015em}
.kform h2 em{color:var(--accent-deep)}
.kform .kform-sub{color:var(--muted);font-size:.92rem;max-width:44ch}
.field{position:relative;display:grid}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--ivory);
  border:1px solid var(--hairline);border-radius:12px;
  padding:1.35rem 1rem .6rem;width:100%;
  transition:border-color .25s,background-color .25s;
}
.field textarea{min-height:120px;resize:vertical}
.field label{
  position:absolute;left:1rem;top:1rem;color:var(--muted);font-size:.95rem;
  pointer-events:none;transition:transform .2s var(--ease-house),font-size .2s,color .2s;
  transform-origin:left top;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:#FBF9F3;outline:none}
.field input:focus~label,.field input:not(:placeholder-shown)~label,
.field textarea:focus~label,.field textarea:not(:placeholder-shown)~label,
.field select~label{transform:translateY(-.55rem);font-size:.68rem;color:var(--accent-deep);letter-spacing:.06em;text-transform:uppercase}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B5554A}
.kform-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.kform-note{font-size:.8rem;color:var(--muted)}
.kform-note a{color:var(--accent-deep);text-decoration:underline}
.kform-status{font-size:.85rem;color:var(--accent-deep);min-height:1.2em}
/* éxito FormSubmit (0704-k · T3): /contacto/?enviado=1 pinta el aviso como pill */
.kform.is-sent .kform-status{
  font-weight:600;background:var(--accent-soft);border:1px solid rgba(71,145,181,.4);
  border-radius:10px;padding:.65rem .95rem;
}
/* 0705 · confirmación GRANDE de envío (la línea de status sola pasaba desapercibida).
   Fondo SÓLIDO: los tintes translúcidos leen oscuro sobre la banda y matan el contraste */
.kform-ok{
  display:flex;align-items:center;gap:16px;
  background:#E7F1F7;border:1px solid rgba(71,145,181,.5);
  border-radius:16px;padding:1.1rem 1.35rem;margin:0 0 1.6rem;
}
.kform-ok-check{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:1.35rem;font-weight:700;
  display:grid;place-items:center;
}
.kform-ok strong{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.12rem;color:var(--accent-deep);
}
.kform-ok div span{display:block;font-size:.92rem;color:var(--muted);margin-top:.15rem}
@media (max-width:1000px){.ksplit-inner{grid-template-columns:1fr}}
@media (max-width:560px){.kform-row{grid-template-columns:1fr}}