:root {
  /* Azul de confianza, blanco y un toque de verde (de la misma familia que el sector, sin copiar a nadie) */
  --bg: #ffffff;
  --surface: #f4f7fb;
  --ink: #0f1f3a;
  --muted: #55647a;
  --line: #dde5ef;
  --accent: #1f5fd1;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0fd;
  --green: #0b7a45;
  --green-ink: #ffffff;
  --green-soft: #e6f6ee;
  --warn-soft: #fff6e0;
  --story: #f0f8f3;
  --story-line: #12a05c;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--font);
}
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.65 var(--font); }
a { color: var(--accent); text-underline-offset: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.prose { max-width: 720px; }
.prose p, .prose li { max-width: 68ch; }

/* Barra de lectura */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 20; }

/* Cabecera */
.top { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.top-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 20px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.top nav { display: flex; gap: 18px; font-size: 15px; justify-content: flex-end; grid-column: 2; grid-row: 1; }
.top .btn-sm { grid-column: 3; }
.top nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.top nav a:hover { color: var(--accent); }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; margin: 0; }
.logo-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; }

.btn, .btn-sm { display: inline-block; background: var(--accent); color: var(--accent-ink) !important; text-decoration: none; border: 0; border-radius: 999px; font-weight: 600; cursor: pointer; text-align: center; }
.btn { padding: 12px 22px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 14px; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--accent) !important; box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Títulos y texto */
.hero { padding: 48px 0 8px; }
.kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; letter-spacing: -0.02em; font-weight: 750; }
h1 { font-size: clamp(30px, 5vw, 46px); margin: 0 0 16px; }
h2 { font-size: clamp(23px, 3.2vw, 30px); margin: 48px 0 12px; }
h3 { font-size: 21px; margin: 28px 0 8px; }
.lead { font-size: 20px; color: var(--muted); max-width: 720px; }
.lead strong { color: var(--ink); }
.meta, .crumbs { color: var(--muted); font-size: 14px; }
.crumbs { margin-top: 28px; }
.hook { font-size: 21px; line-height: 1.45; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 16px; margin: 24px 0; }
.hook em { font-style: italic; }
.fine { font-size: 14px; color: var(--muted); }
.takeaway { background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; }
.takeaway strong:first-child { display: block; color: var(--accent); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }

/* Historia */
.story { background: var(--story); border-left: 4px solid var(--story-line); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px 8px; margin: 28px 0; }
.story h3 { margin: 0 0 10px; }
.story-k { margin: 0 0 4px !important; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--story-line); font-weight: 700; }
.story p { margin: 0 0 12px; }

/* Índice y preguntas desplegables */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 28px 0; }
.toc summary, .faq summary { cursor: pointer; font-weight: 600; }
.toc ol { margin: 10px 0 4px; padding-left: 22px; font-size: 16px; }
.toc li { margin: 4px 0; }
.faq { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; color: var(--muted); }
.sources { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 48px; }
.sources h2 { font-size: 20px; }

/* Tablas */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 640px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--bg); }
tbody tr:hover { background: var(--accent-soft); }
tr:last-child td { border-bottom: 0; }
td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
table.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable th::after { content: " ↕"; opacity: 0.4; }
table.sortable th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
table.sortable th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }

/* Botones de elegir (perfil y filtros) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.perfil-out { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 18px; margin-top: 8px; }
.perfil-out p { margin: 12px 0; }

/* Tarjetas */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card span { color: var(--muted); font-size: 15px; }
.card .tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.next { margin-top: 40px; }

.note { background: var(--warn-soft); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 16px 0; }
.src { font-size: 12px; color: var(--muted); white-space: nowrap; }
.src::before { content: "["; } .src::after { content: "]"; }
code { font-size: 14px; }

.cta { margin: 40px 0; padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--accent); }
.cta h2 { margin-top: 0; }

/* Formularios */
.form { display: grid; gap: 14px; max-width: 520px; margin: 24px 0 48px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.form input, .form select, .form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form .check input { margin-top: 5px; }
.hp { position: absolute; left: -9999px; }

.foot { border-top: 1px solid var(--line); margin-top: 64px; padding: 32px 0; color: var(--muted); font-size: 15px; }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot p { margin: 4px 0; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .top-in { grid-template-columns: 1fr auto; }
  .top nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; justify-content: flex-start; overflow-x: auto; gap: 16px; font-size: 14px; padding-bottom: 2px; }
  .top .btn-sm { grid-column: 2; grid-row: 1; }
  .hero { padding-top: 28px; }
  .hook { font-size: 19px; }
  .lead { font-size: 18px; }
}

/* Menú: el botón grande es para quien aún no es agente */
.top .btn-sm { background: var(--green); color: var(--green-ink) !important; padding: 10px 18px; font-size: 15px; }
.top nav a.nav-sim { color: var(--accent); font-weight: 700; }
.btn-lg { padding: 15px 28px; font-size: 18px; }
.hero-cta { align-items: center; }
.hero .meta { margin-top: 12px; }

/* Banner «¿Aún no eres agente?» */
.banner-empezar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 24px 0; padding: 20px 22px; border-radius: var(--radius); background: var(--green-soft); color: var(--ink); text-decoration: none; border: 1.5px solid var(--green); }
.banner-empezar strong { font-size: 20px; }
.banner-empezar .btn { background: var(--green); color: var(--green-ink) !important; }
.cta { background: var(--accent-soft); border: 0; }

/* Tres pasos del inicio */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 24px; }
.pasos div { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; }
.pasos span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.pasos strong { display: block; }
.pasos p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

/* Simulador */
.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; margin: 24px 0; }
.sim-form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px; background: var(--surface); }
.sim-form legend { font-weight: 700; padding: 0 6px; }
.sim-form input[type=range] { width: 100%; accent-color: var(--accent); }
.sim-form .opt { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; }
.sim-form input[type=radio] { accent-color: var(--accent); width: 18px; height: 18px; }
.sim-ajustes { margin-top: 8px; font-size: 15px; }
.sim-ajustes label { display: grid; gap: 4px; margin: 8px 0; }
.sim-ajustes .check { display: flex; gap: 8px; align-items: center; }
.sim-ajustes input[type=number] { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); max-width: 160px; }
.sim-big { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 4px 0; }
.sim-big span { font-size: 16px; font-weight: 500; color: var(--muted); }
.sim-out { position: sticky; top: 90px; }
.sim-best { background: var(--bg); border: 2px solid var(--green); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 6px 24px rgba(15, 31, 58, 0.08); }
.sim-best h2 { margin: 0; font-size: 28px; }
.sim-best .sim-big { color: var(--green); }
.sim-best p { margin: 8px 0; }
.sim-best .btn { margin: 4px 0 8px; }
.sim-bars { list-style: none; padding: 0; margin: 12px 0; }
.sim-bars li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sim-bars li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sim-mod { font-size: 13px; color: var(--muted); }
.sim-bar { grid-column: 1; height: 8px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.sim-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.sim-bars li strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.sim-bars li.best .sim-bar span { background: var(--green); }
.sim-bars li.best strong { color: var(--green); }
.sim-bars li.fuera { opacity: 0.55; }
.sim-bars small { grid-column: 1 / -1; color: var(--muted); }
.sim-nomina { background: var(--surface); border-radius: var(--radius); padding: 4px 18px; margin: 16px 0; }

@media (max-width: 860px) {
  .sim { grid-template-columns: minmax(0, 1fr); }
  .sim-out { position: static; }
}
@media (max-width: 760px) {
  .top .btn-sm { padding: 8px 12px; font-size: 14px; }
  .btn-lg { width: 100%; }
}

/* Inmobiliarias de España 2026: tarjetas desplegables */
.red-tools { display: flex; justify-content: flex-end; margin: 8px 0 12px; }
.red-tools label { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--muted); }
.red-tools select { font: inherit; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
.redes-lista { display: grid; gap: 10px; }
.red { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.red:hover, .red[open] { border-color: var(--accent); box-shadow: 0 4px 18px rgba(15, 31, 58, 0.06); }
.red summary { list-style: none; cursor: pointer; padding: 16px 18px; display: grid; gap: 8px; }
.red summary::-webkit-details-marker { display: none; }
.red-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.red-nombre { font-size: 20px; letter-spacing: -0.01em; }
.red-modelo { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--surface); color: var(--muted); }
.red-modelo.m-plataforma-para-inmobiliarios { background: var(--green-soft); color: var(--green); }
.red-modelo.m-inmobiliaria-digital { background: var(--accent-soft); color: var(--accent); }
.red-sub { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.red-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dato { display: inline-flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: var(--surface); font-weight: 600; font-size: 15px; }
.dato small { font-weight: 500; font-size: 12px; color: var(--muted); }
.dato.d-si { background: var(--green-soft); color: var(--green); }
.dato.d-no { background: var(--surface); color: var(--ink); }
.dato.d-sin-dato { color: var(--muted); font-weight: 500; }
.red-datos { margin: 0; padding: 0 18px; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.red-datos dt { font-size: 13px; color: var(--muted); }
.red-datos dd { margin: 2px 0 0; }
.red > p { padding: 0 18px 8px; }

/* Banner del simulador dentro de los artículos */
.sim-inline { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 32px 0; padding: 18px 20px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.sim-inline .btn { background: var(--green); color: var(--green-ink) !important; }
.sim-inline strong { display: block; font-size: 19px; }

/* Blog: los 3 primeros */
.top3 .card { position: relative; padding-top: 22px; }
.puesto { position: absolute; top: -10px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--green-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.top-t { margin-top: 24px; }

/* Móvil: menú corto y barra fija con el resultado del simulador */
.sim-sticky { display: none; }
@media (max-width: 860px) {
  .sim-sticky:not([hidden]) { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: #fff; text-decoration: none; font-size: 15px; box-shadow: 0 8px 24px rgba(15, 31, 58, 0.25); }
  .sim-sticky strong { color: #7ee2ad; }
}
@media (max-width: 760px) {
  .solo-ancho { display: none; }
}
.nw, .sim-sticky > span:last-child { white-space: nowrap; }
.sim-alerta { background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; font-size: 15px; }

/* Ronda 1 de revisores (2026-10-31) */
.trans-linea { font-size: 14px; color: var(--muted); background: var(--surface); border-radius: 10px; padding: 8px 12px; margin: 8px 0 16px; }
.cta-t { font-size: clamp(22px, 3vw, 28px); font-weight: 750; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); }
.compara { margin: 40px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.compara ul { padding-left: 20px; }
.gratis { margin: 28px 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.gratis summary { cursor: pointer; font-weight: 600; }
.sim-espera { background: var(--accent-soft); border-radius: var(--radius); padding: 14px 18px; }
.sim-espera p { margin: 6px 0; }
.sim-segunda { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sim-segunda h3 { margin: 4px 0 8px; }
.sim-trans { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.sim-bars li.destacada { background: var(--accent-soft); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.sim-best .sim-nomina { padding: 0; background: none; margin: 0; }
.sim-best .sim-nomina h3 { font-size: 24px; margin-top: 0; }

/* Etiquetas de tipo de red: todas con el mismo peso (neutralidad) */
.red-modelo.m-plataforma-para-inmobiliarios, .red-modelo.m-inmobiliaria-digital, .red-modelo.m-inmobiliaria-tradicional { background: var(--accent-soft); color: var(--accent); }
.dato.d-poco, .dato.d-en-parte, .dato.d-lo-fija-cada-oficina, .dato.d-lo-fija-cada-hub, .dato.d-depende-de-la-zona { background: var(--warn-soft); color: var(--ink); }

/* Portada */
.confianza { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); margin: 14px 0 0; padding: 0; list-style: none; }
.confianza li::before { content: "✓ "; color: var(--green); font-weight: 700; }
.mini-sim { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; margin: 20px 0 8px; max-width: 640px; }
.mini-sim label { font-weight: 600; display: block; }
.mini-sim input[type=range] { width: 100%; accent-color: var(--accent); margin: 8px 0; }
.mini-sim output { font-size: 26px; font-weight: 800; }
.mini-sim p { margin: 6px 0; }
.caminos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.caminos a { display: block; padding: 18px; border-radius: var(--radius); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); }
.caminos a:hover { border-color: var(--accent); }
.caminos strong { display: block; font-size: 19px; margin-bottom: 4px; }
.caminos span { color: var(--muted); }

/* Tablas en el móvil: primera columna fija y aviso de deslizar */
.table-wrap td:first-child, .table-wrap th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.table-wrap th:first-child { background: var(--surface); }
.desliza { display: none; font-size: 13px; color: var(--muted); margin: 0 0 -8px; text-align: right; }
@media (max-width: 760px) { .desliza.si { display: block; } }

/* Barra fija de los artículos en el móvil */
.art-sticky { display: none; }
@media (max-width: 860px) {
  .art-sticky.on { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(15, 31, 58, 0.25); font-size: 15px; }
  .art-sticky a { color: #fff; font-weight: 700; text-decoration: none; flex: 1; }
  .art-sticky button { background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; padding: 4px 8px; }
}

/* Empezar: lo que pide tu comunidad */
#req-comunidad { margin: 4px 0 4px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sim-antes { background: var(--green-soft); border-radius: var(--radius); padding: 6px 18px 4px; margin: 16px 0; }
.sim-antes li { margin: 8px 0; }

/* Simulador: ayudas, comparación con hoy y desglose */
.ayuda { font: inherit; font-size: 14px; font-weight: 700; line-height: 1; width: 26px; height: 26px; padding: 0; margin-left: 4px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); color: var(--accent); cursor: pointer; }
.ayuda[aria-expanded=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ayuda-txt { font-size: 14px; background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.sim-form fieldset.sim-ajustes { margin-top: 0; }
.sim-hoy { font-weight: 700; color: var(--green); }
.sim-hoy.menos, .sim-dif.menos { color: var(--ink); }
.sim-bars small.sim-dif:not(.menos) { color: var(--green); font-weight: 600; }
.sim-cuenta { margin: 8px 0; font-size: 15px; }
.sim-cuenta summary { cursor: pointer; color: var(--accent); }
.sim-bars .sim-cuenta { grid-column: 1 / -1; font-size: 14px; margin: 4px 0 0; }
.sim-cuenta table { width: 100%; min-width: 0; border-collapse: collapse; margin: 8px 0 4px; }
.sim-cuenta td { padding: 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sim-cuenta td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.sim-cuenta .total td { font-weight: 700; }
.sim-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.solo-print { display: none; }

/* Simulador: cuestionario */
.sim-form fieldset[hidden], .sim-sub[hidden] { display: none; }
.sim-q { margin: 14px 0 0; }
.sim-p { margin: 0 0 6px; font-weight: 600; }
.sim-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font-size: 15px; }
.pill:hover span { border-color: var(--accent); }
.pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.sim-sub { margin: 10px 0 0; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.sim-sub label, .sim-paso { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.sim-sub .fine { margin: 6px 0 0; }
.sim-num { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--muted); }
.sim-num input { font: inherit; color: var(--ink); width: 110px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.sim-pasos { display: grid; gap: 14px; margin-top: 8px; }
.paso { font: inherit; font-size: 20px; line-height: 1; width: 38px; height: 38px; flex: none; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); color: var(--accent); cursor: pointer; }
.paso:hover { border-color: var(--accent); }
.sim-p .sim-big { display: inline; margin-left: 4px; font-size: 26px; }
.sim-hoy { font-size: 20px; }
.sim-inc { display: block; font-size: 13px; color: var(--muted); cursor: pointer; }
@media (min-width: 861px) { .sim-out { max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; } }

/* PDF del simulador: solo el informe, sin menús ni formulario */
@media print {
  .top, footer, .progress, .sim-form, .sim-sticky, .sim-acciones, .btn, .sim-bars .sim-cuenta, details.fine { display: none !important; }
  main section:has(#sim-out) > *:not(.sim):not(#sim-print) { display: none; }
  .solo-print { display: block; margin-bottom: 12px; }
  .sim { display: block; }
  .sim-out { position: static; max-height: none; overflow: visible; }
  .sim-inc { display: none; }
  .sim-best { box-shadow: none; }
  .sim-bars li, .sim-best { break-inside: avoid; }
  .sim-bar, .sim-bar span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Contacto directo: agenda y WhatsApp */
.contacto-botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
label.sola { display: block; font-weight: 600; margin: 12px 0; }
label.sola select { display: block; width: 100%; max-width: 420px; margin-top: 6px; }

/* Revisión del 2026-11-06 */
main > .wrap:first-child { padding-top: 20px; }
.table-wrap table.dos-col { min-width: 0; }
.table-wrap table.dos-col td * { white-space: normal; }
.red[open] .red-chips { display: none; }

/* Ramas del cuestionario: una pregunta dentro de la anterior */
.sim-rama { margin: 10px 0 0; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.sim-rama[hidden] { display: none; }
.sim-sub .sim-num input { min-width: 150px; }
.sim-sticky.apagada { display: none !important; }

/* Estudio por pasos: una columna, sin cifras hasta el final */
.sim { display: block; max-width: 720px; }
.sim-out { position: static; max-height: none; overflow: visible; padding-right: 0; }
.sim-avance { scroll-margin-top: 130px; margin: 20px 0 12px; max-width: 720px; }
.sim-avance p { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--muted); }
.sim-progreso { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sim-progreso span { display: block; height: 100%; width: 20%; background: var(--accent); border-radius: 99px; transition: width .25s; }
.sim-nav { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 6px; }
.sim-nav #sim-seguir { margin-left: auto; }
.sim-otra { margin: 10px 0 0; text-align: right; }
.enlace { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.sim-out, #sim-reco { scroll-margin-top: 120px; }
.sim-estudio h2 { margin-top: 0; }
.sim-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.sim-tiles div { background: var(--surface); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: space-between; }
.sim-tiles small { color: var(--muted); font-size: 14px; line-height: 1.3; }
.sim-tiles strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.sim-reparto { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--line); margin: 14px 0 6px; }
.sim-reparto span { display: block; height: 100%; }
.r-otro { background: #9aa8bd; }
.r-gasto { background: #d9a441; }
.r-tuyo { background: var(--green); }
.sim-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.sim-leyenda span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.sim-vemos { padding-left: 20px; }
.sim-vemos li { margin: 8px 0; }
.sim-paso-reco { margin: 26px 0 8px; padding: 18px 20px; background: var(--accent-soft); border-radius: var(--radius); }
.sim-paso-reco h3 { margin-top: 0; }
.sim-quedarse { margin: 14px 0; padding: 14px 18px; border-left: 3px solid var(--green); background: var(--green-soft); border-radius: 0 12px 12px 0; }
.sim-quedarse h3 { margin: 0 0 6px; }
.sim-tabla { margin: 24px 0; }
.sim-tabla > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
@media (max-width: 560px) { .sim-tiles { grid-template-columns: minmax(0, 1fr); } .sim-tiles div { grid-template-columns: 1fr auto; align-items: center; } }
.sim-intro { margin: 2px 0 14px; color: var(--muted); }

/* Cifras de un clic */
.sim-etiqueta { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.atajo { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.atajo:hover { border-color: var(--accent); }
.atajo.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sim-otra-cifra { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; color: var(--muted); }
.sim-otra-cifra input { min-width: 110px !important; width: 110px; }
.pill[hidden] { display: none; }
.sim-eco { padding: 10px 14px; background: var(--green-soft); border-radius: 10px; margin: 8px 0; font-weight: 600; }
.btn[hidden] { display: none !important; }

/* Aviso animado con la media de España */
.sim-toast { position: fixed; right: 20px; top: 130px; width: min(320px, calc(100vw - 32px)); z-index: 30; background: var(--ink); color: #fff; padding: 14px 16px; border-radius: 14px; box-shadow: 0 12px 30px rgba(15, 31, 58, .28); }
.sim-toast p { margin: 0 0 4px; font-size: 15px; line-height: 1.35; }
.sim-toast strong { display: block; color: #7ee2ad; font-size: 17px; margin-bottom: 2px; }
.sim-toast small { color: #b9c4d6; font-size: 12px; }
.sim-toast.entra { animation: toast-entra .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes toast-entra { from { transform: translateX(120%) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) {
  .sim-toast { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; }
  @keyframes toast-entra { from { transform: translateY(130%); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .sim-toast.entra { animation: none; } }

/* Estudio: selector, preguntas, pantallas y llamada */
[hidden] { display: none !important; }
#estudio { max-width: 720px; margin: 0 auto; }
#estudio[data-vista="selector"], #estudio:not([data-vista]) { max-width: none; }
#estudio h2 { font-size: 24px; line-height: 1.25; margin: 0 0 10px; }
#estudio h2:focus { outline: none; }
#estudio h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
#estudio p { margin: 0 0 12px; }

.es-sel { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 10px 0; }
.es-tarjeta-l { display: block; width: 100%; text-align: left; font: inherit; padding: 9px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer; }
.es-tarjeta-l:hover, .es-tarjeta-l:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.es-tarjeta-l strong { display: block; font-size: 16px; line-height: 1.3; }
.es-tarjeta-l span { display: block; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.es-tarjeta-l small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.es-sel-mini a { padding: 12px 14px; }
.es-sel-mini strong { font-size: 16px; margin: 0; }

.es-cab { margin-bottom: 14px; }
.es-cab p { font-size: 16px; }
.es-cab-enlaces { font-size: 14px; color: var(--muted); }
.es-avance { margin-bottom: 14px; }
.es-avance-t { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); min-height: 28px; }
.es-avance-t span { margin-left: auto; }
.es-progreso { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.es-progreso span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.es-banda { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.es-eco { font-size: 15px; color: var(--muted); }

.es-paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.es-paso legend { padding: 0; width: 100%; }
.es-ayuda { font-size: 15px; color: var(--muted); }
.es-ops { display: grid; gap: 8px; margin: 8px 0; }
.es-ops .pill { display: block; position: relative; }
.es-ops .pill span { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 46px; padding: 9px 16px; border-radius: 12px; font-size: 16px; line-height: 1.3; }
.es-ops .pill small { display: block; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.es-ops .pill input:checked + span small { color: var(--accent-ink); }
.es-fila { margin: 12px 0; }
.es-fila-t { font-weight: 700; margin: 0 0 4px !important; font-size: 16px; }
.es-fila .es-ops, .es-control .es-ops, .es-sub .es-ops { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.es-otra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.es-otra-t { font-size: 14px; color: var(--muted); }
.es-otra select { font: inherit; width: 100%; min-height: 46px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.es-num { display: inline-flex; align-items: center; gap: 6px; }
.es-num input { font: inherit; width: 130px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 16px; }
.es-unidad { display: inline-flex; gap: 6px; }
.es-mas { margin: 6px 0 !important; }
.es-mas .enlace, .es-pie .enlace, .es-accion .enlace, .es-guardar .enlace, .es-salida .enlace { min-height: 32px; font-size: 15px; }
.es-marca { display: flex; gap: 8px; align-items: center; font-size: 15px; margin-top: 6px; }
.es-sub { border-left: 3px solid var(--line); padding-left: 12px; margin: 10px 0; }
.es-vivo:empty, .es-falta:empty { display: none; }
.es-vivo { font-size: 15px; color: var(--muted); margin: 8px 0 !important; }
.es-falta, .es-error { color: #b3261e; font-size: 15px; }
.es-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }

.es-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.es-tabs button { flex: 1 0 auto; font: inherit; font-size: 15px; min-height: 44px; padding: 8px 12px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink); cursor: pointer; }
.es-tabs button[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; color: var(--accent); }
.es-tabs button:disabled { color: var(--muted); opacity: .5; cursor: default; }

.es-aviso { font-size: 15px; line-height: 1.45; border-left: 3px solid var(--accent); padding: 8px 12px; background: var(--surface); border-radius: 0 10px 10px 0; }
.es-titular { margin-bottom: 14px; }
.es-kicker { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--muted); margin-bottom: 4px !important; }
.es-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; margin: 14px 0; }
.es-cifras > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.es-cifras small { font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.es-cifras strong { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.es-cifras .es-destaca { border-color: var(--accent); background: var(--accent-soft); }
p.es-destaca { font-weight: 700; }
.es-frase { font-size: 17px; }
.es-semaforos { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.es-semaforos li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.es-semaforos li > span { align-self: start; text-align: center; font-size: 13px; font-weight: 700; padding: 3px 6px; border-radius: 8px; background: var(--surface); }
.es-semaforos p { font-size: 15px; margin: 2px 0 0; }
.es-s-bien > span, .es-s-ya > span { background: var(--green-soft); color: var(--green); }
.es-s-ojo > span, .es-s-camino > span { background: var(--warn-soft); color: #7a5600; }
.es-s-prioridad > span { background: #fde8e6; color: #b3261e; }
.es-s-construir > span { background: var(--accent-soft); color: var(--accent); }

.es-bloque { margin: 16px 0; }
.es-bloque ul { margin: 6px 0; padding-left: 20px; }
.es-barra-t { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--line); margin: 8px 0; }
.es-t-tuyo { background: var(--green); }
.es-t-aut { background: var(--accent); }
.es-t-gasto { background: #d98a2b; }
.es-t-otro { background: #9aa7b8; }
.es-leyenda { list-style: none; padding: 0 !important; margin: 6px 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.es-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }
.es-tabla { width: 100%; font-size: 15px; }
.es-resalta td, .es-medidor .es-resalta { background: var(--accent-soft); font-weight: 700; }
.es-cuenta { width: 100%; border-collapse: collapse; font-size: 15px; }
.es-cuenta td { padding: 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.es-cuenta td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.es-total td { font-weight: 700; }
.es-medidor dl { margin: 8px 0 0; }
.es-medidor dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 15px; }
.es-medidor dt { min-width: 0; }
.es-medidor dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.es-pliegue { margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--bg); }
.es-pliegue > summary { cursor: pointer; font-weight: 600; font-size: 16px; padding: 11px 0; color: var(--accent); }
.es-pliegue[open] { padding-bottom: 10px; }
.es-ajustes { font-size: 15px; }

.es-plan > .es-palanca { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.es-meta { font-weight: 700; }
.es-semana { background: var(--green-soft); border-radius: 10px; padding: 8px 12px; font-size: 15px; }
.es-prueba { margin: 16px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); }
.es-control { margin: 12px 0; }
.es-copiar { background: var(--surface); padding: 10px 14px; border-radius: 12px; }
.es-copia { display: block; width: 100%; font: inherit; font-size: 14px; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }

.es-reco section, .es-quedarte, .es-necesidad { margin: 16px 0; }
.es-quedarte { padding: 14px 16px; border-radius: var(--radius); background: var(--story); border: 1px solid var(--line); }
.es-tarjeta { margin: 10px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.es-tarjeta header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.es-tarjeta h4 { margin: 0; font-size: 18px; }
.es-puesto { font-size: 14px; color: var(--muted); white-space: nowrap; }
.es-tarjeta-cab { font-size: 14.5px; color: var(--muted); }
.es-tarjeta-l-lista { list-style: none; margin: 6px 0; padding: 0; }
.es-tarjeta-l-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.es-tarjeta-l-lista li > span { min-width: 0; }
.es-tarjeta-l-lista strong { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.es-pierde strong { color: #b3261e; }
.es-ojo { font-size: 14.5px; margin-top: 8px; padding: 8px 12px; background: var(--warn-soft); border-radius: 10px; }
.es-ojo ul { margin: 4px 0 0; padding-left: 18px; }
.es-ficha { margin: 8px 0 0 !important; font-size: 15px; }

.es-llamada { margin: 24px 0 16px; padding: 18px 16px; border-radius: var(--radius); background: var(--accent-soft); }
.es-llamada .es-aviso { background: var(--bg); }
.es-promesa { font-weight: 600; }
.es-llevar { margin: 16px 0; }
.es-guardar { margin: 6px 0 !important; }
.es-accion { margin: 14px 0 !important; }
.es-pie { margin: 10px 0 !important; }
.es-barra { display: none; }
@media (max-width: 760px) {
  .es-barra { display: flex; flex-direction: column; align-items: center; gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 16px calc(6px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
  .es-barra .btn { width: 100%; padding: 11px 16px; text-align: center; }
  .es-barra .enlace { font-size: 12.5px; }
  body.es-con-barra { padding-bottom: 96px; }
  body.es-con-barra .sim-toast { bottom: 100px; }
  body.es-con-toast { padding-bottom: 130px; }
  #estudio h2 { font-size: 22px; }
}

.es-reservar .es-ve { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.es-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 8px 0; font-weight: 400; }
.es-check input { margin-top: 5px; flex: none; }
.es-pregunta { display: grid; gap: 6px; font-size: 15px; margin: 8px 0; }
.es-pregunta input, .es-form input:not([type=checkbox]), .es-form select, .es-form textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); width: 100%; }
.es-sale { margin: 14px 0; }
.es-salida { font-size: 15px; }
.es-form { display: grid; gap: 12px; }
.es-form > label:not(.es-check) { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.es-hp { position: absolute; left: -9999px; }
.es-recordar { padding: 12px 14px; background: var(--surface); border-radius: 12px; margin: 14px 0; }
.es-hecho { font-size: 15px; color: var(--green); }

@media print {
  body.es-imprime > *:not(#estudio-print) { display: none !important; }
  body.es-imprime #estudio-print { display: block !important; font-size: 13px; }
  body.es-imprime details > summary { list-style: none; }
  .es-tarjeta, .es-palanca, .es-cifras > div { break-inside: avoid; }
}
table.es-cuenta, .table-wrap table.es-tabla { min-width: 0; }
.es-tabla th, .es-tabla td { padding: 8px 10px; font-size: 14px; white-space: normal; }
.es-bloque ul.es-numerada { list-style: none; padding-left: 0; }
/* Móvil: la pregunta 1 cabe en la primera pantalla. Lo secundario de la cabecera baja debajo de la pregunta */
@media (max-width: 760px) {
  #estudio[data-vista="paso"] { display: flex; flex-direction: column; }
  #estudio[data-vista="paso"] > * { order: 0; }
  #estudio[data-vista="paso"] .es-cab { display: contents; }
  #estudio[data-vista="paso"] > .es-paso { order: 1; }
  #estudio[data-vista="paso"] .es-cab > :not(h2):not(p:first-of-type) { order: 2; }
  #estudio[data-vista="paso"] .es-cab > .es-pliegue { margin-top: 16px; }
  .es-cab h2 { font-size: 20px !important; margin-bottom: 6px !important; }
  .es-cab p { font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
  .es-avance { margin-bottom: 8px; }
  .es-paso h2 { font-size: 20px !important; }
  .es-ops { gap: 6px; margin: 6px 0; }
  .es-ops .pill span { min-height: 44px; padding: 8px 14px; }
}

/* Tablas del estudio con más de dos columnas: en móvil, una tarjeta por fila */
@media (max-width: 600px) {
  .table-wrap.es-apila { border: 0; background: none; overflow: visible; }
  .es-apila table, .es-apila tbody, .es-apila tr, .es-apila td { display: block; width: 100%; }
  .es-apila thead { display: none; }
  .es-apila tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px 12px; margin: 0 0 12px; }
  .es-apila td, .table-wrap.es-apila td:first-child { position: static; background: none; border: 0; padding: 6px 0; }
  .es-apila td:first-child { font-weight: 700; }
  .es-apila td[data-etq]:not(:first-child)::before { content: attr(data-etq); display: block; font-size: 13px; color: var(--muted, #5b6675); }
}

/* Tarjetas del resultado: las 3 mejores (2026-11-08) */
.es-top-t { font-weight: 600; margin: 14px 0 4px; }
.es-top .es-puesto { font-weight: 700; color: var(--accent); }
.es-origen { margin: 0 0 6px; font-size: 14.5px; color: var(--muted, #5b6472); }
.es-comision { margin: 8px 0 0; font-size: 15px; }
/* «Qué incluye»: burbujas, una por cosa que incluye la red */
.es-incluye { margin-top: 8px; font-size: 14.5px; }
.es-burbujas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.es-burbujas li { padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.es-bien { font-size: 14.5px; margin-top: 8px; padding: 8px 12px; background: #eaf6ef; border-radius: 10px; }
.es-bien ul { margin: 4px 0 0; padding-left: 18px; }

/* Formulario corto con calendario (2026-11-08) */
.es-form-corto fieldset.es-cal { border: 0; padding: 0; margin: 10px 0 0; }
.es-cal legend { font-weight: 600; margin-bottom: 6px; }
.es-cal-dias, .es-cal-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.es-cal .pill { display: inline-flex; position: relative; }
/* Los botones de día y hora llevan un radio invisible: no puede heredar el ancho del 100 % de los campos del formulario (hacía la página más ancha que la pantalla) */
.es-form .pill input { width: 1px; height: 1px; padding: 0; border: 0; }
.es-calendly iframe { width: 100%; min-width: 0; height: 700px; border: 0; border-radius: var(--radius); }

/* Total antes de impuestos en grande (2026-11-08) */
.es-cuenta tr.es-total td { font-size: 22px; padding-top: 10px; border-bottom: 0; }
.es-cuenta tr.es-total td:last-child { color: var(--green); }

/* Móviles muy estrechos (320-380 px): que el logo y el botón verde quepan sin ensanchar la página */
@media (max-width: 380px) {
  .top-in { column-gap: 10px; }
  .top .btn-sm { padding: 7px 10px; font-size: 13px; white-space: normal; max-width: 122px; line-height: 1.2; }
}

/* 2026-11-14: entre 761 y 1100 px la cabecera se salía (botón verde cortado y scroll horizontal) */
@media (min-width: 761px) and (max-width: 1100px) {
  .top nav { gap: 12px; font-size: 14px; min-width: 0; overflow-x: auto; }
  .top .btn-sm { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
}

/* 2026-11-14: botón de llamada justo después del titular del resultado */
.es-cta-arriba { margin: 14px 0 22px; }
.es-cta-arriba .btn { width: 100%; max-width: 420px; }

/* 2026-11-14: casilla del boletín */
.es-check, .form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.es-check input, .form .check input { width: auto; margin-top: 3px; flex: none; }