/* =====================================================================
   Dos Abejitas · tema «Cielo pop» (nov 2026) — el mismo estilo moderno de Chispa.
   Se carga DESPUÉS de portal.css y solo cambia la apariencia. Para volver al estilo anterior basta con
   quitar su <link> en base.html. Fuente propia (Lexend, licencia OFL), sin servicios externos.
   ===================================================================== */
@font-face { font-family: "Lexend"; src: url(../fonts/lexend-var.woff2) format("woff2-variations"), url(../fonts/lexend-var.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #0B1640;
  --ink-2: #3A4570;
  --honey: #FFC83D;
  --honey-deep: #9A6500;
  --wax: #FFF6D6;
  --sky: #EAF0FF;
  --lav: #F3F6FF;
  --leaf: #0FA968;
  --leaf-2: #7ED9A8;
  --paper: #FFFFFF;
  --line: #DCE3F7;
  --pen: #2563FF;
  --pen-deep: #1A4AD6;
  --pop: #FF3D8B;
  --pop-deep: #E0206F;
  --lime: #B8F23A;
  --edge: 1.5px solid var(--line);
  --lift: 0 18px 36px -20px rgba(11, 22, 64, .32), 0 2px 6px -2px rgba(11, 22, 64, .06);
  --lift-sm: 0 8px 18px -10px rgba(11, 22, 64, .28);
  --display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.c-blue   { --c: #2563FF; --c-tint: #EAF0FF; }
.c-coral  { --c: #E5394A; --c-tint: #FDE8EA; }
.c-green  { --c: #0FA968; --c-tint: #DDF7EA; }
.c-teal   { --c: #0B8FA6; --c-tint: #DDF4F8; }
.c-pink   { --c: #FF3D8B; --c-tint: #FFE6F0; }
.c-orange { --c: #E8700E; --c-tint: #FDEBDA; }

body { font-size: 1.04rem; background: var(--lav); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }
a { color: var(--pen); }
a:hover { color: var(--pen-deep); }
:focus-visible { outline-color: var(--pen); }

/* ---------- encabezado ---------- */
.top { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); box-shadow: 0 4px 18px -14px rgba(11, 22, 64, .35); }
.brand-word { font-weight: 800; letter-spacing: -.03em; }
.brand-mark { box-shadow: none; background: var(--honey); }
.top-nav a { font-weight: 600; color: var(--ink-2); }
.top-nav a:hover { color: var(--pen); }

/* ---------- botones planos ---------- */
.btn { border: 0; font-family: var(--text); font-weight: 700; box-shadow: var(--lift-sm); transition: transform .08s, background .15s, box-shadow .12s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--lift-sm); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn-small { box-shadow: none; }
.btn-blue { background: var(--pen); color: #fff; box-shadow: 0 10px 22px -12px rgba(37, 99, 255, .8); }
.btn-blue:hover { background: var(--pen-deep); color: #fff; }
.btn-honey { background: var(--pop); color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 61, 139, .8); }
.btn-honey:hover { background: var(--pop-deep); color: #fff; }
.btn-white { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-white:hover { background: var(--sky); color: var(--ink); }

/* ---------- portada: bloque azul eléctrico con el panal ---------- */
.hero { background: var(--pen); color: #fff; padding: clamp(2.4rem, 6vw, 4.4rem) 0 clamp(2.6rem, 6vw, 4.4rem); }
.hero::before { content: ""; position: absolute; right: -140px; bottom: -180px; width: 520px; height: 520px; border-radius: 50%;
  background: #3D76FF; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: -120px; top: -160px; width: 340px; height: 340px; border-radius: 50%;
  background: #1F55F0; pointer-events: none; }
.hero::before, .hero::after { z-index: 0; }
.hero-grid { z-index: 1; }
.sky, .hills { display: none; }
.hero-pill { background: var(--lime); color: var(--ink); border: 0; box-shadow: none; font-weight: 700; letter-spacing: .01em; }
.hero-text h1 { color: #fff; }
.mark { background: none; color: var(--lime); padding: 0; }
.hero .lead { color: #DCE6FF; }
.ticks { color: #DCE6FF; }
.ticks li::before { color: var(--lime); }
.hero .btn-blue { background: #fff; color: var(--ink); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
.hero .btn-blue:hover { background: var(--sky); }
.hero .btn-white { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.hero .btn-white:hover { background: rgba(255, 255, 255, .24); }

/* el panal sobre el azul: celdas blancas, la miel en amarillo y las pendientes punteadas */
.cell-shadow { fill: rgba(5, 18, 80, .28); }
.cell-shape { stroke: #0B1640; stroke-width: 3; fill: #fff; }
.cell-center .cell-shape, .cell-honey .cell-shape { fill: var(--wax); }
.cell-rim { stroke: #0B1640; stroke-width: 3; }
.cell-building .cell-shape { stroke: #fff; stroke-width: 3; fill: rgba(255, 255, 255, .16); }
.cell-planned .cell-shape { stroke: #fff; stroke-width: 3.5; fill: rgba(255, 255, 255, .08); }
.cell-building .cell-glyph, .cell-planned .cell-glyph, .cell-building .cell-name, .cell-planned .cell-name { fill: #fff; }
.cell-planned .cell-glyph { opacity: .85; }
.cell-glyph, .cell-name { font-family: var(--display); }
.cell-glyph { font-weight: 800; }
.cell-name { font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.comb a.cell-building:hover .cell-shape, .comb a.cell-planned:hover .cell-shape { fill: rgba(255, 255, 255, .3); }
.comb a.cell:focus-visible .cell-shape, .comb a.cell:focus-visible .cell-rim { stroke: var(--lime); }
.flight { stroke: #fff; opacity: .6; }
.bee-body, .bee-head { stroke-width: 3; }
.comb-legend { color: #fff; }
.key { background: rgba(255, 255, 255, .14); border: 0; color: #fff; }
.key .mini-shape { stroke: #fff; }
.key .mini-honey .mini-shape { stroke: var(--honey); }

/* ---------- secciones ---------- */
.block { background: var(--lav); }
.block-honey { background: #fff; border: 0; background-image: none; }
.block-lav { background: var(--sky); }
.block-sky { background: #fff; border: 0; }
.garden { display: none; }
.block-lead { color: var(--ink-2); }

.subject, .pillar, .step, .price-card, .form, .faq details, .note, .legal { border: 0; box-shadow: var(--lift); }
.subject { border-radius: 24px; }
.subject-head { border-bottom: 0; }
.subject-honey .subject-head { border-right: 0; background: var(--c-tint); }
.subject-brand { color: var(--c); }
.status { border: 0; background: var(--lav); color: var(--ink-2); }
.status-honey { background: var(--leaf); color: #fff; }
.status-planned { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }

.mini-shadow { fill: none; }
.mini-shape { stroke: var(--c, var(--ink)); stroke-width: 4; }
.mini-honey .mini-shape { fill: var(--honey); stroke: #0B1640; stroke-width: 3; }
.mini-glyph { font-family: var(--display); font-weight: 800; }

.pillar-icon { border: 0; border-radius: 16px; }
.p-0 .pillar-icon { background: #EAF0FF; } .p-1 .pillar-icon { background: #DDF7EA; }
.p-2 .pillar-icon { background: #FFE6F0; } .p-3 .pillar-icon { background: #F1FBD9; }
.pillar dt { font-weight: 800; }

/* ---------- precios ---------- */
.price-card.is-open { background: #fff; box-shadow: inset 0 0 0 2px var(--pen), var(--lift); }
.price-card.is-best { background: var(--ink); color: #fff; box-shadow: var(--lift); }
.price-card.is-best .price span, .price-card.is-best .price-year, .price-card.is-best .price-save s,
.price-card.is-best .price-save-none, .price-card.is-best .muted { color: #C9D3F5; }
.price-card.is-best .price-save { color: var(--lime); }
.price-card.is-best .price-soon { color: #C9D3F5; border-color: #5A6490; }
.price strong { font-weight: 800; letter-spacing: -.03em; }
.price-save { color: var(--leaf); }
.price-ribbon { background: var(--pop); color: #fff; border: 0; box-shadow: none; }
.price-soon { border: 1.5px dashed var(--line); }

/* ---------- formulario ---------- */
.form input[type="email"] { border: 1.5px solid #B9C6EE; border-radius: 14px; }
.form input[type="email"]:focus { border-color: var(--pen); outline: none; box-shadow: 0 0 0 4px var(--sky); }
.check-list label { border: 1.5px solid var(--line); font-weight: 600; }
.check-list input:checked + label { background: var(--sky); border-color: var(--pen); box-shadow: none; color: var(--pen-deep); }
.check-list input:checked + label::before { background: var(--pen); }
.consent input { accent-color: var(--pen); }
.form-errors { border-width: 2px; }

/* ---------- preguntas ---------- */
.faq details { border-radius: 18px; }
.faq summary { font-family: var(--display); font-weight: 700; }
.faq summary::after { color: var(--pen); }
.faq details[open] { background: #fff; box-shadow: inset 0 0 0 2px var(--pen), var(--lift); }

/* ---------- páginas sueltas y pie ---------- */
body:not(.page-home) main { background: var(--lav); }
.foot { background: var(--ink); }
.foot-wave { display: none; }
.foot a { color: var(--lime); }
.foot-brand { font-weight: 800; }

@media (max-width: 880px) {
  .hero::before { width: 360px; height: 360px; right: -160px; bottom: -160px; }
  .hero::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; } }