/* Fondo con profundidad y bloques translúcidos (como en la web de Cerodos), y una escala tipográfica con más contraste.
   Se carga al final: manda sobre lo anterior. */

/* ---------- Fondo: azul Liberty con luces de color, fijo detrás de todo. Las tarjetas lo dejan ver esmerilado. */
:root {
  --bgc: #B9CAE6;
  --glass-l: rgb(255 255 255 / .6);
  --glass-l-strong: rgb(255 255 255 / .72);
  --glass-l-line: rgb(255 255 255 / .78);
  --glass-l-shadow: 0 1px 0 rgb(255 255 255 / .85) inset, 0 34px 64px -34px rgb(15 30 61 / .42), 0 10px 24px -16px rgb(15 30 61 / .18);
  --glass-d: rgb(9 24 58 / .86);
  --ink-2: #4B5674;
}
html { background: var(--bgc); }
body { background: transparent !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 4% -6%, rgb(24 66 158 / .62), transparent 62%),
    radial-gradient(46vmax 40vmax at 104% 24%, rgb(255 132 40 / .38), transparent 62%),
    radial-gradient(56vmax 44vmax at 26% 98%, rgb(32 88 190 / .46), transparent 64%),
    radial-gradient(40vmax 34vmax at 88% 94%, rgb(255 168 96 / .3), transparent 62%),
    linear-gradient(170deg, #AFC3E4 0%, #C6D3EA 45%, #D2DCEC 100%);
}
/* grano muy fino para que el fondo no se vea plano */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tint { background: transparent !important; }

/* ---------- Bloques claros translúcidos */
.pick-panel, .pv-panel, .ct-form, .qk, .qk-social a, .p-also article, .dm-form, .dm-done, .dm-wa, .visit-route,
.door:not(.is-open), .doors.sm .door:not(.is-open), .pstage, .card, .price-box:not(.accent),
.three > div, .pairs > div, .faq, .ledger, .p-used li, .pv-chips img, .dm-chip span, .dm-radios span, .ct-place {
  background: var(--glass-l) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--glass-l-line) !important;
  box-shadow: var(--glass-l-shadow) !important;
}
/* los que ya eran texto suelto ahora son tarjetas: les damos aire y forma */
.three > div, .pairs > div { padding: 26px 28px 28px !important; border-radius: 22px; }
.faq, .ledger { padding: 10px 28px !important; border-radius: 24px; }
.pick-panel, .pv-panel { background: var(--glass-l) !important; }
.pick-panel::before { opacity: .6; }
.pstage { border-radius: 28px; }
.p-used li, .pv-chips img { background: var(--glass-l-strong) !important; box-shadow: 0 6px 14px -8px rgb(15 30 61 / .35) !important; }
.dm-chip span, .dm-radios span { box-shadow: none !important; }
.dm-chip input:checked + span, .dm-radios input:checked + span { background: rgb(255 246 238 / .85) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgb(255 114 0 / .15) !important; }
.field input, .field select, .field textarea { background: rgb(255 255 255 / .7); border-color: rgb(15 30 61 / .14); }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; }

/* ---------- Bloques oscuros: azul profundo translúcido y esmerilado */
.glass, .on-dark, .price-box.accent, .door.is-open, .pv-prom, .dm-box, .ct-next {
  background: var(--glass-d) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / .14) !important;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset, 0 40px 80px -40px rgb(8 18 40 / .7) !important;
}
.hc-panel { box-shadow: 0 50px 90px -50px rgb(8 18 40 / .8); }

/* barra y pie, también de vidrio */
.site-header.scrolled .hd, .site-header.menu-open .hd { background: rgb(255 255 255 / .62); border-color: var(--glass-l-line); }
.site-footer { background: rgb(255 255 255 / .42) !important; border-top: 1px solid var(--glass-l-line) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.hd-actions { background: rgb(255 255 255 / .55); border-color: var(--glass-l-line); }

/* ---------- Tipografía: títulos más grandes y pesados, texto más liviano y chico. Más distancia entre niveles. */
body { font-size: 1.0625rem; line-height: 1.6; }
h1 { font-size: clamp(2.9rem, 6vw, 5.4rem); font-weight: 800; letter-spacing: -.048em; line-height: .96; }
h2 { font-size: clamp(2.2rem, 4.3vw, 3.9rem); font-weight: 800; letter-spacing: -.042em; line-height: .98; }
h3 { font-size: clamp(1.12rem, 1.35vw, 1.3rem); font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }
.lead { font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.55; }
p, li { color: inherit; }
.sec-head h2 { max-width: 14em; }
.pick-head h2, .pv-head h2, .p-also + *, .ct-form-hd h2 { letter-spacing: -.045em; }
.pick-head h2, .pv-head h2 { font-size: clamp(2.4rem, 4.8vw, 4.3rem); line-height: .95; }
.hero2 h1 { font-size: clamp(3rem, min(7vw, 11vh), 7rem); letter-spacing: -.055em; line-height: .92; }
.page-head h1, .prod-hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.9rem); }
.agent-intro h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); letter-spacing: -.05em; }
.dm-step legend { font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -.025em; }
.pick-side p, .three p, .pairs p, .ptext p, .p-also p, .qk-tx em, .pv-old span { font-size: .98rem; }
.ptext h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.p-used > span, .pv-cols span, .pick .dm-label span, .dm-chip small, .qk-tx small { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.dm-chip small { letter-spacing: .06em; }

/* ---------- Celular: blur más liviano para que fluya, sin perder la transparencia */
@media (max-width: 700px) {
  .pick-panel, .pv-panel, .ct-form, .qk, .p-also article, .dm-form, .dm-done, .dm-wa, .visit-route, .door:not(.is-open), .pstage, .card,
  .three > div, .pairs > div, .faq, .ledger {
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); background: rgb(255 255 255 / .64) !important;
  }
  .glass, .on-dark, .price-box.accent, .door.is-open, .pv-prom, .dm-box, .ct-next { background: rgb(12 27 58 / .86) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  h2, .pick-head h2, .pv-head h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .ptext h2 { font-size: 1.9rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .on-dark, .pv-prom, .dm-box, .ct-next { background: #11234A !important; }
  .pick-panel, .pv-panel, .ct-form, .qk, .dm-form, .card, .door:not(.is-open) { background: #F7F9FC !important; }
}
.pn-txt { font: 800 .96rem/1 var(--head); letter-spacing: .03em; text-transform: uppercase; color: #1B1B1B; text-decoration: none; }   /* mismo peso y alto de letra que las palabras de AVM y TRANSIT */
/* en pantallas angostas las puertas quedan abiertas y claras: vidrio claro, no oscuro */
@media (max-width: 900px) {
  .door.is-open { background: rgb(255 255 255 / .64) !important; border: 1px solid var(--glass-l-line) !important; box-shadow: var(--glass-l-shadow) !important; }
}
/* legibilidad sobre el fondo con color */
:root { --ink-2: #3D4866; }
.p-used > span { color: #3E4865; }
.pv-cols span { color: #5A6480; } .pv-cols span + span { color: var(--accent-ink, #B04A00); }
.dm-form .field label em { color: #5F6884; }
.ct-place .btn span { color: inherit; font-size: inherit; }

/* ---------- Textos que se cargan al bajar (text.js) */
.tx-on .tx-h .tw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.tx-on .tx-h .tw > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--w) * 45ms); }
.tx-on .tx-h.tx-in .tw > span { transform: none; }
.tx-on .tx-p { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .8s ease; transition-delay: calc(120ms + var(--pi, 0) * 70ms); }
.tx-on .tx-p.tx-in { opacity: 1; transform: none; filter: none; }

/* ---------- Botones con borde luminoso: una luz recorre el borde y un halo suave los rodea */
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn, .link { --glow: 255 140 50; }
.btn::after, .link::after {
  content: "" !important; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ga), rgb(var(--glow) / 0) 0 62%, rgb(var(--glow) / .8) 78%, rgb(255 255 255 / .7) 84%, rgb(var(--glow) / .8) 90%, rgb(var(--glow) / 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: btnGlow 4.5s linear infinite; opacity: .7; transition: opacity .3s;   /* en reposo, la luz es más suave */ margin: 0 !important; transform: none !important;
}
@keyframes btnGlow { to { --ga: 360deg; } }
.btn:is(:hover, :focus-visible)::after, .link:is(:hover, :focus-visible)::after { opacity: 1; }
.btn-primary { --glow: 255 214 170; box-shadow: 0 0 0 1px rgb(255 160 80 / .55), 0 0 22px -2px rgb(255 114 0 / .55), 0 12px 26px -14px rgb(255 114 0 / .8) !important; }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: 0 0 0 1px rgb(255 190 130 / .8), 0 0 34px 0 rgb(255 114 0 / .65), 0 16px 30px -14px rgb(255 114 0 / .8) !important; }
.btn-ghost, .link { box-shadow: 0 0 0 1px rgb(255 140 50 / .28), 0 0 18px -4px rgb(255 114 0 / .4); }
.btn-ghost:hover, .link:hover, .btn-ghost:focus-visible, .link:focus-visible { box-shadow: 0 0 0 1px rgb(255 140 50 / .5), 0 0 26px -2px rgb(255 114 0 / .5); }
/* sobre fondos oscuros, la luz es blanca y fría */
.glass .btn-ghost, .on-dark .btn-ghost, .hero-c .btn-ghost, .closing .btn-ghost, .dm-box .btn, .glass .link, .on-dark .link {
  --glow: 190 215 255; box-shadow: 0 0 0 1px rgb(190 215 255 / .35), 0 0 20px -4px rgb(150 190 255 / .45);
}
.btn-agent { gap: 10px; }
.btn-agent .live, .closing .btn-agent i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgb(34 197 94 / .2); flex: none; }
.closing .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.closing .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .45); }
@media (prefers-reduced-motion: reduce) { .btn::after, .link::after { animation: none; } }

/* ---------- Al pasar el cursor el botón se rellena: el texto siempre contrasta con ese relleno */
.btn-primary:hover, .btn-primary:focus-visible, .btn-ghost:hover, .btn-ghost:focus-visible, .link:hover, .link:focus-visible { --fill: #0F1E3D; color: #fff !important; }
.btn-primary:hover .roll > span, .btn-ghost:hover .roll > span, .link:hover .roll > span,
.btn-primary:hover .roll::after, .btn-ghost:hover .roll::after, .link:hover .roll::after { color: inherit; }
/* sobre bloques oscuros el relleno es blanco y el texto azul */
:is(.glass, .on-dark, .closing, .hc-panel, .dm-box, .ct-next, .pv-prom, .band) :is(.btn-primary, .btn-ghost, .link):is(:hover, :focus-visible) { --fill: #fff; color: #0F1E3D !important; }
:is(.glass, .on-dark, .closing, .hc-panel, .band) .btn-ghost:is(:hover, :focus-visible) { border-color: #fff; }
.btn-agent:hover .live, .btn-agent:focus-visible .live { box-shadow: 0 0 0 4px rgb(34 197 94 / .3); }

/* ---------- Ventana del agente: borde luminoso que la recorre y un halo que la destaca */
.chat { position: relative; isolation: isolate;
  box-shadow: 0 0 0 1px rgb(170 205 255 / .5), 0 0 34px -4px rgb(110 165 255 / .65), 0 0 90px -10px rgb(80 140 255 / .55), 0 0 160px -30px rgb(255 120 30 / .6), 0 60px 100px -50px rgb(8 18 40 / .7) !important; }
.chat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ga), rgb(255 150 60 / 0) 0 55%, rgb(255 150 60 / .95) 70%, #fff 76%, rgb(140 190 255 / .95) 84%, rgb(140 190 255 / 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: btnGlow 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .chat::after { animation: none; } }

/* A medida: tarjetas con imagen con el mismo redondeo que el resto, y la grilla de abajo con la misma separación */
.cards .card { border-radius: 24px; }
.cards + .pairs { column-gap: 24px; row-gap: 24px; margin-top: 24px !important; }
.cards + .pairs > div { border-radius: 24px; }

/* Encabezados de página: el mismo ancho en todas las páginas */
.page-head .head-card { max-width: 577px !important; }
@media (max-width: 900px) { .page-head .head-card { max-width: none !important; } }

/* Nosotros, Dónde estamos: los tres datos en una fila, sin dejar vacía la mitad derecha */
.channels { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 700px) { .channels { grid-template-columns: 1fr; } }

/* Contraste: el naranja de marca (#FF7200) queda para fondos oscuros y botones.
   Sobre fondos claros, la palabra destacada de los títulos y los datos en naranja usan un tono un poco más profundo que se lee bien. */
:root { --accent-text: #DA5B00; }
main :is(h1, h2, h3) em { color: var(--accent-text); }
:is(.glass, .on-dark, .hc-panel, .closing, .band, .dm-box, .ct-next, .pv-prom, .door.is-open, .jh-win, .chat) :is(h1, h2, h3) em { color: var(--accent); }