/* Smaroto · estilos de la web.
   Paleta Cielo (#30AFFF #92EEFF #D8FFC5 #C4F7CA), la del logo, en modo oscuro (por defecto)
   y claro (data-modo="claro" en <html>). Los fondos y líneas se derivan para que el texto
   tenga un contraste de 4,5:1 o más. */

/* ---------- Colores ---------- */
:root {
  --c1: #30AFFF; --c2: #92EEFF; --c3: #D8FFC5; --c4: #C4F7CA;
  --bg: #07111a; --bg-2: #0b1824; --card: #10202e; --line: #1f3446;
  --ink: #eef1f7; --muted: #9ea7b8;
  --acc: #92EEFF; --on-acc: #04121c; --acc-ink: #92EEFF; --acc-2: #30AFFF;
  --glow: rgba(48, 175, 255, .45);
  --grad: linear-gradient(90deg, #D8FFC5, #92EEFF 45%, #30AFFF);
  --radius: 18px;
  --font-title: Roboto, system-ui, sans-serif;
  --font-body: Roboto, system-ui, sans-serif;
}
[data-modo="claro"] {
  --bg: #f5fdff; --bg-2: #e9f9f1; --card: #ffffff; --line: #cfe6ec;
  --ink: #0b2233; --muted: #4a6272;
  --acc: #30AFFF; --on-acc: #03131f; --acc-ink: #0a68a6; --acc-2: #92EEFF;
  --glow: rgba(48, 175, 255, .35);
  --grad: linear-gradient(90deg, #0a68a6, #178a7a);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  transition: background-color .3s, color .3s;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-title); letter-spacing: -.02em; line-height: 1.1; }
.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
section { padding: 92px 0; position: relative; }
.alt { background: var(--bg-2); }
.etiqueta { font-family: var(--font-title); font-size: .82rem; color: var(--acc-ink); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin: 10px 0 14px; }
.intro { color: var(--muted); max-width: 620px; font-size: 1.08rem; margin: 0 0 46px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sombra { box-shadow: 0 34px 70px -34px var(--glow); }

/* ---------- Cabecera ---------- */
header.cab { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: .95rem; }
.nav ul a { text-decoration: none; }
.nav ul a:hover { color: var(--ink); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font-weight: 700; text-decoration: none; border: 1px solid transparent; font-family: inherit; font-size: .98rem; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s; }
.btn-acc { background: var(--acc); color: var(--on-acc); }
.btn-acc:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--glow); }
.btn-sec { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-sec:hover { border-color: var(--muted); }
.botones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Fondo con brillo ---------- */
.brillo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.brillo::before { content: ""; position: absolute; width: 760px; height: 760px; left: 50%; top: -400px; transform: translateX(-50%); background: radial-gradient(circle, var(--glow), transparent 65%); }
.brillo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 70%); opacity: .5; }
.sobre-brillo { position: relative; z-index: 1; }
.chapa { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--muted); font-size: .88rem; }
.chapa b { color: var(--acc-ink); font-weight: 700; }

/* ---------- Ticker ---------- */
.ticker { border-block: 1px solid var(--line); background: var(--acc); color: var(--on-acc); overflow: hidden; white-space: nowrap; }
.ticker-pista { display: inline-flex; gap: 38px; padding: 15px 0; font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; text-transform: uppercase; animation: deslizar 32s linear infinite; }
.ticker-pista span::after { content: "✱"; margin-left: 38px; opacity: .6; }
@keyframes deslizar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-pista { animation: none; } }

/* ---------- Chat de WhatsApp ---------- */
.chat { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.chat-av { width: 38px; height: 38px; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; flex: none; }
.chat-cab b { display: block; font-size: .95rem; line-height: 1.3; }
.chat-cab small { color: var(--muted); }
.msg { max-width: 84%; padding: 9px 14px; border-radius: 14px; margin: 8px 0; font-size: .92rem; line-height: 1.45; }
.msg.cli { background: color-mix(in srgb, var(--acc) 22%, var(--card)); margin-left: auto; border-bottom-right-radius: 4px; }
.msg.bot { background: var(--bg-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.huecos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.huecos span { border: 1px solid var(--acc-ink); color: var(--acc-ink); border-radius: 8px; padding: 2px 9px; font-weight: 700; font-size: .82rem; }
.chat-nota { text-align: center; font-size: .76rem; color: var(--muted); margin: 10px 0 0; }

/* ---------- Etiquetas de tipo (WhatsApp, Llamada…) ---------- */
.tipo { font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 6px; text-align: center; color: var(--ink); }
.t1 { background: color-mix(in srgb, var(--c1) 30%, transparent); }
.t2 { background: color-mix(in srgb, var(--c2) 30%, transparent); }
.t3 { background: color-mix(in srgb, var(--c3) 30%, transparent); }
.t4 { background: color-mix(in srgb, var(--c4) 30%, transparent); }


/* ---------- Qué hacemos por módulos ---------- */
.modulos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.modulo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; transition: border-color .2s, transform .2s, box-shadow .2s; }
.modulo:hover { border-color: var(--acc); transform: translateY(-3px); box-shadow: 0 24px 50px -30px var(--glow); }
.ico { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; }
.i1 { background: color-mix(in srgb, var(--c1) 28%, transparent); }
.i2 { background: color-mix(in srgb, var(--c2) 28%, transparent); }
.i3 { background: color-mix(in srgb, var(--c3) 28%, transparent); }
.i4 { background: color-mix(in srgb, var(--c4) 28%, transparent); }
.modulo h3 { margin: 2px 0 6px; font-size: 1.18rem; }
.modulo p { margin: 0; color: var(--muted); font-size: .95rem; }
.insignia { display: inline-block; margin-bottom: 8px; background: var(--acc); color: var(--on-acc); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; }
.modulo-combina { text-decoration: none; background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.modulo-combina .ico { background: color-mix(in srgb, var(--on-acc) 12%, transparent); color: var(--on-acc); }
.modulo-combina p { color: var(--on-acc); font-weight: 700; }

/* Los módulos se combinan */
.combinan { margin-top: 64px; scroll-margin-top: 96px; }
.combinan h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 22px; }
.combos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.combo { border: 1px dashed var(--acc); border-radius: var(--radius); padding: 20px; background: color-mix(in srgb, var(--acc) 6%, transparent); }
.combo p { margin: 12px 0 0; font-weight: 700; line-height: 1.4; }
.combo-icos { display: flex; align-items: center; gap: 8px; color: var(--acc-ink); font-weight: 700; font-size: 1.2rem; }
.combo-icos i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); }
.combo-icos svg { width: 20px; height: 20px; }

/* ---------- Preguntas frecuentes ---------- */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acc-ink); font-size: 1.35rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--muted); margin: 10px 0 0; }

/* ---------- Formulario y contacto ---------- */
.form { display: grid; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.form .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: .9rem; font-weight: 700; }
.form label small, .form .ayuda { font-weight: 400; color: var(--muted); }
.form .ayuda { font-size: .85rem; line-height: 1.45; }
.form a { color: var(--acc-ink); }
.form-nota { margin: 0; font-size: .85rem; color: var(--muted); }
.form .trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha { min-height: 65px; }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 11px; padding: 12px 14px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--acc); outline: 2px solid color-mix(in srgb, var(--acc) 40%, transparent); outline-offset: 0; }
.form textarea { min-height: 100px; resize: vertical; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .86rem; color: var(--muted); }
.form .check input { width: auto; margin-top: 5px; }
.form-aviso { margin: 0; padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--acc) 18%, transparent); font-size: .9rem; }
.form-aviso[data-tipo="error"] { background: color-mix(in srgb, #ff5a5a 20%, transparent); }
.vias { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; color: var(--muted); }
.vias b { color: var(--ink); }
.vias a { color: var(--acc-ink); }
.telematico { margin-top: 28px; padding: 22px 24px; border-radius: 20px; background: color-mix(in srgb, var(--acc) 12%, var(--card)); border: 1px solid var(--acc); }
.telematico b { display: block; font-family: var(--font-title); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.telematico span { display: block; margin-top: 8px; color: var(--muted); }

/* ---------- Pie ---------- */
footer.pie { border-top: 1px solid var(--line); padding: 30px 0; color: var(--muted); font-size: .9rem; }
.pie-fila { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pie-fila a { text-decoration: none; margin-left: 18px; }
.pie-fila a:first-child { margin-left: 0; }

/* ---------- Responsive común ---------- */
@media (max-width: 900px) {
  .nav ul { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .modulo { grid-template-columns: 1fr; }
  .form .fila { grid-template-columns: 1fr; }
  .form { padding: 22px 18px; }
  .nav .btn { padding: 10px 14px; font-size: .9rem; }
}

/* ---------- Botón de modo claro/oscuro ---------- */
.nav-acciones { display: flex; align-items: center; gap: 10px; }
.boton-modo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s; }
.boton-modo:hover { border-color: var(--acc); transform: translateY(-1px); }
.boton-modo svg { width: 20px; height: 20px; }
.boton-modo .sol { display: none; }
[data-modo="oscuro"] .boton-modo .sol { display: block; }
[data-modo="oscuro"] .boton-modo .luna { display: none; }

/* ---------- Logo de Smaroto (marca/originales) ---------- */
/* Tipografía aproximada al logo: Fredoka. */
.logo-marca { display: inline-flex; align-items: center; text-decoration: none; font-family: Fredoka, var(--font-title); font-weight: 700; font-size: 1.75rem; letter-spacing: -.01em; color: #30AFFF; line-height: 1; }
.marca-icono { width: .78em; height: .78em; margin: .1em .03em 0 .05em; }
.marca-pie { display: grid; justify-items: start; gap: 6px; }
.marca-vertical { display: inline-flex; align-items: center; gap: 12px; }
.marca-icono-grande { width: 44px; height: 44px; }
.marca-texto { font-family: Fredoka, var(--font-title); font-weight: 700; font-size: 2rem; color: #30AFFF; line-height: 1; }
.marca-texto .o-clara { color: #92EEFF; }
.marca-lema { font-family: Fredoka, var(--font-body); font-weight: 400; color: #30AFFF; font-size: 1rem; }
[data-modo="claro"] .marca-lema { color: var(--acc-ink); }
.marca-copy { margin-top: 6px; }

/* ---------- Secciones de la portada ---------- */
/* Cabecera */
.hero { padding: 84px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); margin: 22px 0 18px; }
.hero .lead { color: var(--muted); font-size: 1.15rem; max-width: 33em; margin: 0 0 28px; }
.garantias { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: var(--muted); font-size: .92rem; }
.garantias span::before { content: "✓"; color: var(--acc-ink); font-weight: 700; margin-right: 6px; }
.hero .chat { transform: rotate(1.2deg); }

/* Un día cualquiera con los datos al lado.
   Banda oscura con luces de la paleta difuminadas, igual en los dos modos, para que destaque
   del resto de la página. Las tarjetas son claras para que se lean bien sobre ese fondo. */
.escenario {
  --fondo-escenario: #062038;
  --ink: #f2f7fb; --muted: #d0deea; --acc: #92EEFF; --acc-ink: #92EEFF; --acc-2: #30AFFF;
  --line: rgba(146, 238, 255, .3);
  background: var(--fondo-escenario); color: var(--ink); overflow: hidden; isolation: isolate;
  border-block: 1px solid rgba(146, 238, 255, .35);
}
.escenario::before {
  content: ""; position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(48% 30% at 8% 12%, #30AFFF, transparent 70%),
    radial-gradient(40% 26% at 94% 30%, rgba(146, 238, 255, .85), transparent 70%),
    radial-gradient(46% 28% at 12% 66%, rgba(216, 255, 197, .6), transparent 70%),
    radial-gradient(50% 32% at 88% 90%, #30AFFF, transparent 70%),
    radial-gradient(36% 22% at 50% 48%, rgba(10, 104, 166, .9), transparent 70%);
  filter: blur(60px);
  animation: luces 26s ease-in-out infinite alternate;
}
.escenario::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(3, 14, 26, .28); }
@keyframes luces { to { transform: translate3d(3%, -3%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .escenario::before { animation: none; } }
.escenario .hito-card {
  --card: #ffffff; --bg-2: #eef7fb; --line: #d6e8ef; --ink: #0b2233; --muted: #4a6272; --acc: #30AFFF; --acc-ink: #0a68a6;
  color: var(--ink); border: 0; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .7);
}
.escenario .dato-lado { background: rgba(4, 16, 28, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .8); }
.escenario .hito::after { box-shadow: 0 0 0 5px var(--fondo-escenario), 0 0 18px var(--acc); }

.linea { position: relative; max-width: 1040px; margin-inline: auto; }
.linea::before { content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--acc), var(--acc-2), transparent); }
.hito { display: grid; grid-template-columns: 76px 1fr; gap: 40px; margin-bottom: 26px; position: relative; }
.hito time { font-family: var(--font-title); font-size: 1.45rem; font-weight: 700; color: var(--acc-ink); text-align: right; padding-top: 14px; }
.hito::after { content: ""; position: absolute; left: 86px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 5px var(--bg-2), 0 0 18px var(--acc); }
.hito-cuerpo { display: grid; grid-template-columns: 1fr 270px; gap: 26px; align-items: start; }
.hito-cuerpo > :only-child { grid-column: 1 / -1; }
.hito-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.hito-card h3 { margin: 0 0 4px; font-size: 1.12rem; }
.hito-card p { margin: 0; color: var(--muted); }
.hito-card .tipo { display: inline-block; margin-bottom: 10px; }
.hito-card .chat { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--bg-2); }
.dato-lado { position: relative; background: color-mix(in srgb, var(--acc) 10%, var(--card)); border: 1px solid var(--acc); border-radius: 20px; padding: 22px; box-shadow: 0 28px 56px -30px var(--glow); }
.dato-lado::before { content: ""; position: absolute; left: -27px; top: 34px; width: 26px; border-top: 2px dashed var(--acc); }
.dato-lado .etiqueta { font-size: .72rem; }
.dato-lado b { display: block; font-family: var(--font-title); font-size: 3rem; line-height: 1; letter-spacing: -.05em; color: var(--acc-ink); margin-top: 10px; }
.dato-lado p { margin: 10px 0 0; font-size: .95rem; }
.dato-lado small { display: block; margin-top: 10px; color: var(--muted); font-size: .78rem; }

/* Qué hacemos con iconos dibujados */
.modulos { grid-template-columns: repeat(4, 1fr); }
.modulo { grid-template-columns: 1fr; align-content: start; }
.ico { color: var(--acc-ink); }
.ico svg { width: 26px; height: 26px; }

.contacto { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: start; }
.faq-col { max-width: 820px; }

@media (max-width: 1060px) {
  .modulos, .combos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid, .contacto { grid-template-columns: 1fr; gap: 40px; }
  .hero .chat { transform: none; }
  .hito-cuerpo { grid-template-columns: 1fr; gap: 14px; }
  .dato-lado::before { left: 34px; top: -15px; width: 0; height: 14px; border-top: 0; border-left: 2px dashed var(--acc); }
}
@media (max-width: 560px) {
  .modulos, .combos { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 56px; }
  .linea::before { left: 6px; }
  .hito { grid-template-columns: 1fr; gap: 8px; padding-left: 30px; }
  .hito time { text-align: left; padding-top: 0; }
  .hito::after { left: 0; top: 7px; }
  .dato-lado b { font-size: 2.5rem; }
}

/* ---------- Páginas legales ---------- */
.legal { padding: 64px 0 80px; }
.legal-texto { width: min(760px, 100% - 32px); margin-inline: auto; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.7rem); margin: 10px 0 8px; }
.legal h2 { font-size: 1.3rem; margin: 38px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--ink); }
.legal a { color: var(--acc-ink); }
.tabla-legal { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--ink); }
.borrador { border: 1px dashed var(--acc); border-radius: 14px; padding: 12px 16px; background: color-mix(in srgb, var(--acc) 8%, transparent); color: var(--ink) !important; font-size: .9rem; }