/* Lumens · web pública · Contacto (canales, formulario y ubicación), gracias, la PC (@container app) y menos movimiento.
   Copia literal de docs/prototipo-web-v3/fuente/paginas.css y pc.css (valores sin cambiar; el cromo de la PC está en cromo.css). */

/* ---------- contacto ---------- */
.ct{padding-top:22px}
.ct-grid{display:grid;gap:16px}
.canales{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.canal{width:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:76px;
  padding:12px 16px 12px 12px;border-radius:var(--r-l);text-align:left;color:#fff}
.canal svg{grid-row:span 2;width:50px;height:50px;padding:12px;border-radius:16px;background:rgba(255,255,255,.22)}
.canal b{font:850 19px/1.1 var(--f);font-stretch:108%}
.canal span{font:650 15px/1.3 var(--f);opacity:.95}
.canal.k1{background:linear-gradient(110deg,#4C7CFF 0%,#1544DB 60%,#3A1FA8 100%)}
.canal.k2{background:linear-gradient(110deg,#15804A 0%,#11713F 55%,#0C6A52 100%)} /* contraste 4,5:1 (prototipo: #3BE38A, #1FA855) */
.canal.k3{background:linear-gradient(110deg,#7D4BEA 0%,#6A2CE0 55%,#9C1F72 100%)} /* contraste 4,5:1 (prototipo: #A57BFF) */
.ubic{margin-top:16px;border-radius:var(--r-xl);overflow:hidden;background:var(--sup);border:1px solid var(--linea)}
.mapa{position:relative;height:150px;overflow:hidden;background:linear-gradient(135deg,#DDF7EE 0%,#E6ECFF 55%,#FFE9E4 100%)}
[data-tema="noche"] .mapa{background:linear-gradient(135deg,#0F3B4A 0%,#18245A 55%,#3A1A4A 100%)}
.calle{position:absolute;display:block;background:rgba(255,255,255,.85);border-radius:6px}
[data-tema="noche"] .calle{background:rgba(160,180,255,.22)}
.calle.c1{left:-10%;right:-10%;top:58%;height:12px;transform:rotate(-8deg)}
.calle.c2{top:-20%;bottom:-20%;left:36%;width:10px;transform:rotate(14deg)}
.calle.c3{top:-20%;bottom:-20%;left:72%;width:7px;transform:rotate(-6deg)}
.calle.c4{left:-10%;right:40%;top:22%;height:7px;transform:rotate(5deg)}
.pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);color:#E23D6A;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.pin svg{width:46px;height:46px}
.ubic-t{display:flex;flex-direction:column;padding:16px 18px 8px}
.ubic-t .eb{margin-bottom:8px}
.ubic-t b{font:850 21px/1.15 var(--f);font-stretch:108%}
.ubic-t span{color:var(--tinta2)}
.forma{position:relative;display:grid;gap:14px;padding:20px 18px;border-radius:var(--r-xl);background:var(--sup);border:1px solid var(--linea);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--sombra)}
.forma-cab{display:flex;align-items:center;gap:12px}
.forma-cab p{margin:4px 0 0;color:var(--tinta2);font-size:15.5px}
.forma-b{width:54px;flex:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.resumen{margin:0;padding:11px 14px;border-radius:14px;background:rgba(255,122,112,.14);color:var(--error);font:700 15px/1.3 var(--f)}
.resumen:empty{display:none}
.fila{display:grid;gap:14px}
.fila>*{min-width:0}
.campo{position:relative}
.campo label{display:block;margin:0 0 6px;font:750 15px/1.2 var(--f)}
.campo label em{font-style:normal;font-weight:500;color:var(--tinta2)}
.campo input,.campo select,.campo textarea{width:100%;min-height:54px;padding:0 16px;border-radius:16px;border:1.5px solid var(--linea2);background:var(--campo);
  font-size:17px;outline:none;transition:border-color .2s}
.campo textarea{min-height:96px;padding:14px 16px;resize:vertical;line-height:1.4}
.campo select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta2);opacity:.7}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--c-violeta);box-shadow:0 0 0 4px rgba(106,44,224,.18)}
.campo.mal input,.campo.mal select,.campo.mal textarea{border-color:var(--error)}
.campo .err{display:block;margin-top:5px;font:600 14px/1.3 var(--f);color:var(--error)}
.campo .err:empty{display:none}
.cuenta{position:absolute;right:4px;top:0;font:600 12px/1.2 var(--mono);color:var(--tinta2)}
.cuenta.mal{color:var(--error)}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.forma .btn-s{width:100%}
.legal{margin:0;text-align:center;font-size:13.5px;color:var(--tinta2)}
.legal a{color:var(--azul-tx);font-weight:700}
@container app (min-width:560px){.fila.dos{grid-template-columns:1fr 1fr}}

/* ---------- pantalla de gracias ---------- */
.pantalla{flex:1;display:grid;align-items:center;padding:calc(80px + var(--st)) 0 calc(96px + var(--sb));text-align:center}
.pan-in{display:flex;flex-direction:column;align-items:center}
.grande-b{width:150px;margin-bottom:18px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.4))}
.gracias .grande-b{animation:flota 3.4s ease-in-out infinite}
.pantalla .lead{max-width:440px}
.pan-acc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

/* ---------- PC ---------- */
@container app (min-width:700px){
  .prods{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;margin:26px 0 0;padding:0}
  .prod{max-width:none}
  .certs{flex-wrap:nowrap}
  .cert{width:auto;flex:1}
  .proms,.pasos{grid-template-columns:repeat(3,1fr)}
  .prom,.paso{flex-direction:column;align-items:flex-start;padding:22px}
}
@container app (min-width:900px){
  .wrap{padding:0 40px}
  .sec{padding:72px 0;scroll-margin-top:84px}
  .lead{font-size:19px}
  .hero{padding:calc(110px + var(--st)) 0 40px}
  .hero-in{grid-template-columns:1.12fr .88fr;align-items:center;gap:30px}
  .hero-txt{order:1}
  .hero-vis{order:2;height:540px;margin:0}
  .aro{left:36%;top:210px}
  .aro.a1{width:380px;height:380px;margin:-190px 0 0 -190px}
  .aro.a2{width:560px;height:560px;margin:-280px 0 0 -280px}
  .cordon,.foco,.piso{left:36%}
  .cordon{height:80px}
  .foco{top:76px;width:190px;margin-left:-95px;transform-origin:50% -76px}
  .halo{width:500px;height:500px;margin:-250px 0 0 -250px}
  .piso{width:460px;margin-left:-230px;height:44px}
  .bombi-h{width:210px;right:20px}
  .hola{right:24px;top:132px;font-size:16px;padding:11px 16px}
  .h1{font-size:clamp(56px,5.3cqi,92px)}
  .h1.pg{font-size:clamp(56px,6cqi,96px)}
  .hechos{margin-top:22px}
  .hero .cta{margin-top:30px}
  .prods{grid-template-columns:repeat(4,1fr);gap:18px}
  .prod-vis{height:270px}
  .prod-vis img{height:232px}
  .cal,.fab{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .cal-vis,.fab-vis{margin-top:0}
  .lab{height:380px}
  .pieza{height:280px;top:28px}
  .proms,.pasos{gap:16px}
  .prom{min-height:200px;justify-content:space-between}
  .prom b{font-size:26px}
  .paso{min-height:170px}
  .paso b{font-size:24px}
  .cierre{padding:48px 0 0 52px}
  .cierre-txt{padding-bottom:48px}
  .cierre-b{width:190px;margin:0 60px 0 0}
  .pg-cab{padding:calc(140px + var(--st)) 0 10px}
  .lineas{grid-template-columns:repeat(3,1fr)}
  .linea{min-height:150px}
  .linea img{height:130px}
  .enls{grid-template-columns:repeat(2,1fr);gap:10px}
  .ct-grid{grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
  .ct-der{order:2}.ct-izq{order:1}
  .mapa{height:220px}
  .forma{padding:28px}
  .pantalla{padding-top:140px}
  .grande-b{width:190px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.hero-txt>*{opacity:1!important;transform:none!important;transition:opacity .15s ease!important}
}
html.quieto *,html.quieto *::before,html.quieto *::after{animation:none!important;transition:none!important}