/* Estilo de marca doyclic.cl: Montserrat, rosa #F82A5E con degradado a magenta,
   tarjetas blancas de 20px, botones píldora y fondo con grilla suave. */
:root {
  --fondo: #f7f7fb;
  --fondo-2: #f0f0f7;
  --panel: #ffffff;
  --tinta: #0a0a18;
  --suave: #62628c;
  --linea: #e7e7f0;
  --linea-fuerte: #cdcde0;
  --marca: #f82a5e;
  --marca-2: #ff6b8a;
  --magenta: #c026d3;
  --marca-texto: #d9204e;   /* rosa con contraste AA para texto chico */
  --marca-boton: #e0184f;   /* rosa con contraste AA para texto blanco */
  --marca-clara: #ffeef2;
  --degradado: linear-gradient(135deg, #f82a5e 20%, #ff6b8a 60%, #c026d3 100%);
  --error: #c0182f;
  --radio: 20px;
  --sombra: 0 4px 24px rgba(0, 0, 0, .07);
  --sombra-h: 0 16px 40px rgba(0, 0, 0, .12);
  --fuente: "Montserrat", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.oculto-accesible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 1rem; top: -4rem; background: var(--tinta); color: #fff; padding: .6rem 1rem; border-radius: 50px; z-index: 20; }
.saltar:focus { top: .75rem; }
.degradado { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Barra superior */
.barra { position: relative; display: flex; align-items: center; gap: 1.5rem; height: 64px; padding: 0 1.5rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); z-index: 10; }
.barra::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--avance, 0%); background: var(--degradado); transition: width .4s ease; }
.marca { display: flex; align-items: center; text-decoration: none; }
.marca img { height: 30px; width: auto; display: block; }
.lema { margin: 0; color: var(--suave); flex: 1; font-size: .85rem; font-weight: 500; }

.boton, .boton-linea {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 50px; padding: .75rem 1.4rem; font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.boton { background: var(--marca-boton); color: #fff; border: 0; box-shadow: 0 8px 24px -8px rgba(248, 42, 94, .6); }
.boton:hover { background: #c81446; transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(248, 42, 94, .7); }
.boton:active, .boton-linea:active { transform: translateY(0); }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.boton-linea { background: #fff; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.boton-linea:hover { border-color: var(--marca); color: var(--marca-texto); }

/* Estudio: formulario a la izquierda, vista previa a la derecha */
.estudio { display: grid; grid-template-columns: minmax(360px, 440px) 1fr; height: calc(100vh - 64px); }
.panel { overflow-y: auto; border-right: 1px solid var(--linea); background: var(--panel); display: flex; flex-direction: column; }
.panel-cabeza { padding: 1.75rem 1.5rem 1rem; }
.panel-cabeza h1 { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.panel-cabeza p { margin: 0; color: var(--suave); font-size: .92rem; }
form { flex: 1; padding: 0 1rem; }

.paso { border: 1px solid var(--linea); border-radius: 16px; margin-bottom: .6rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
.paso[open] { border-color: rgba(248, 42, 94, .3); box-shadow: var(--sombra); }
.paso summary { display: flex; align-items: center; gap: .75rem; padding: .95rem 1rem; cursor: pointer; font-weight: 700; font-size: .92rem; list-style: none; border-radius: 16px; }
.paso summary::-webkit-details-marker { display: none; }
.paso summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.paso[open] summary::after { transform: rotate(-135deg); }
.paso summary small { font-weight: 500; color: var(--suave); }
.paso .n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--marca-clara); color: var(--marca-texto); font-size: .75rem; font-weight: 800; flex: none; }
.paso[open] .n { background: var(--degradado); color: #fff; }
.campos { padding: .25rem 1rem 1.25rem; display: grid; gap: 1rem; }

.campo { display: grid; gap: .4rem; }
.campo > span { font-weight: 700; font-size: .84rem; }
.campo > span small, .campo small { font-weight: 500; color: var(--suave); font-size: .78rem; }
.campo abbr { text-decoration: none; color: var(--marca-texto); }
input:not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: #fff; font-size: .92rem; transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #9a9ab8; }
textarea { resize: vertical; }
input:hover, textarea:hover { border-color: #b3b3cc; }
input:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px rgba(248, 42, 94, .12); }
input[aria-invalid="true"] { border-color: var(--error); }
.campo .error { color: var(--error); font-weight: 600; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.dos > *, .campo, .miniaturas li > *, .fila-campos > * { min-width: 0; }
input, textarea { min-width: 0; }

/* Subida de fotos */
.zona {
  position: relative; display: grid; place-items: center; min-height: 150px; border: 1.5px dashed var(--linea-fuerte);
  border-radius: 16px; cursor: pointer; overflow: hidden; background: var(--fondo); text-align: center; padding: 1rem;
  transition: border-color .2s, background .2s;
}
.zona.chica { min-height: 64px; }
.zona:hover, .zona.encima { border-color: var(--marca); background: var(--marca-clara); }
.zona:focus-within { outline: 3px solid var(--marca); outline-offset: 2px; }
.zona-texto { color: var(--suave); font-weight: 600; font-size: .88rem; }
.zona-texto u { color: var(--marca-texto); text-underline-offset: 3px; }
.zona-vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zona.chica .zona-vista { object-fit: contain; padding: .5rem; background: #fff; }
.alt { font-size: .85rem !important; }
.quitar { justify-self: start; background: none; border: 0; padding: .2rem 0; color: var(--marca-texto); font-weight: 700; font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.miniaturas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.miniaturas li { display: grid; grid-template-columns: 64px 1fr auto; gap: .6rem; align-items: center; }
.miniaturas img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.consejo { margin: 0; font-size: .82rem; color: var(--suave); background: var(--fondo); border-left: 3px solid var(--marca); border-radius: 4px 12px 12px 4px; padding: .75rem .9rem; }

/* Listas repetibles */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fila { border: 1px solid var(--linea); background: var(--fondo); border-radius: 16px; padding: .9rem .9rem .6rem; display: grid; gap: .4rem; }
.fila-campos { display: grid; gap: .6rem; }

/* Color */
.color-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.color-elegido { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 700; font-size: .88rem; }
.color-elegido input { width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--linea-fuerte); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.color-elegido input::-webkit-color-swatch-wrapper { padding: 0; }
.color-elegido input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-elegido input::-moz-color-swatch { border: 0; border-radius: 50%; }
.subtitulo { margin: 0 0 -.4rem; font-weight: 700; font-size: .82rem; }
.muestras { display: flex; flex-wrap: wrap; gap: .5rem; }
.muestras button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linea-fuerte); cursor: pointer; }
.muestras button[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--marca); }

.paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .6rem; }
.paleta { display: grid; gap: .45rem; padding: .45rem .45rem .6rem; border: 1px solid var(--linea); border-radius: 16px; background: #fff; cursor: pointer; text-align: left; font-size: .8rem; font-weight: 700; line-height: 1.25; transition: border-color .2s, transform .2s, box-shadow .2s; }
.paleta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.paleta[aria-pressed="true"] { border-color: var(--marca); box-shadow: 0 0 0 1.5px var(--marca), var(--sombra); }
.paleta-muestra { position: relative; display: block; height: 58px; border-radius: 11px; overflow: hidden; background: #0e141d; }
.paleta-muestra::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 85% 100%, var(--c2), transparent 70%); opacity: .75; }
.paleta-muestra i { position: absolute; left: .55rem; bottom: .55rem; width: 44%; height: 14px; border-radius: 999px; background: var(--c1); }
.paleta-muestra b { position: absolute; left: .55rem; top: .5rem; width: 60%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .85); box-shadow: 0 11px 0 -1px var(--c1); }
.paleta-muestra em { position: absolute; right: .55rem; top: .5rem; width: 16px; height: 16px; border-radius: 50%; background: var(--c2); }
.paleta span:last-child { padding: 0 .15rem; }
.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.tipo { display: grid; gap: .2rem; align-content: start; padding: .9rem .9rem .8rem; border: 1px solid var(--linea); border-radius: 16px; background: #fff; cursor: pointer; text-align: left; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tipo:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.tipo[aria-pressed="true"] { border-color: var(--marca); box-shadow: 0 0 0 1.5px var(--marca), var(--sombra); }
.tipo-muestra { font-size: 1.45rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-bottom: .25rem; }
.tipo-nombre { font-size: .95rem; font-weight: 600; }
.tipo small { color: var(--suave); font-size: .74rem; line-height: 1.35; }
.personalizar { justify-self: start; padding: .55rem 1.1rem; font-size: .82rem; }

.cierre { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: 1rem 1.5rem; margin-top: 1rem; border-top: 1px solid var(--linea); background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); }
.cierre .boton { flex: 1; padding: .95rem 1.25rem; font-size: 1rem; }
.estado { margin: 0; width: 100%; font-size: .82rem; color: var(--suave); }
.estado:empty { display: none; }

/* Vista previa */
.vista { display: flex; flex-direction: column; min-width: 0; padding: .75rem 1rem 1rem; gap: .75rem; background: var(--fondo); }
.vista-cabeza { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; }
.dispositivos { display: inline-flex; background: #fff; border: 1px solid var(--linea); border-radius: 50px; padding: 3px; }
.dispositivos button { border: 0; background: none; padding: .45rem 1rem; border-radius: 50px; font-weight: 700; font-size: .8rem; cursor: pointer; color: var(--suave); }
.dispositivos button[aria-pressed="true"] { background: var(--tinta); color: #fff; }

.disenos { border: 0; margin: 0; padding: 3px; display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--linea); border-radius: 50px; min-width: 0; }
.disenos legend { float: left; padding: 0 .6rem 0 .8rem; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--marca-texto); }
.diseno { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; border-radius: 50px; cursor: pointer; font-weight: 700; font-size: .8rem; color: var(--suave); transition: background .2s, color .2s; white-space: nowrap; }
.diseno:hover { color: var(--tinta); background: var(--fondo); }
.diseno:has(input:checked) { background: var(--tinta); color: #fff; }
.diseno:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.diseno { position: relative; }
.diseno input { position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.diseno .punto { width: .7rem; height: .7rem; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15); flex: none; }
.diseno:has(input:checked) .punto { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }

/* Marco tipo navegador, como el portafolio de doyclic.cl */
.marco { flex: 1; min-height: 0; position: relative; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-h); padding-top: 28px; }
.marco::before { content: ""; position: absolute; inset: 0 0 auto; height: 28px; background: #fff; border-bottom: 1px solid var(--linea); }
.marco::after { content: ""; position: absolute; top: 9px; left: 12px; width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; box-shadow: 16px 0 #ffbd2e, 32px 0 #27c93f; }
.marco .pantalla { top: 28px; }
.marco[data-disp="movil"] { background: transparent; box-shadow: none; border: 0; padding-top: 0; display: flex; justify-content: center; }
.marco[data-disp="movil"]::before, .marco[data-disp="movil"]::after { display: none; }
.pantalla { position: absolute; inset: 0; }
/* Teléfono de verdad: 390×844 escalado para ocupar todo el alto disponible */
.marco[data-disp="movil"] { align-items: center; }
.marco[data-disp="movil"] .pantalla { position: relative; inset: auto; top: 0; height: calc(100% - 20px); width: auto; aspect-ratio: 390 / 844; max-width: 100%; border-radius: 34px; overflow: hidden; box-shadow: 0 0 0 9px var(--tinta), 0 20px 50px -20px rgba(0, 0, 0, .5); }
.pantalla iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.pantalla iframe.atras { visibility: hidden; }

.ir-vista { display: none; }

/* Diálogo de compra */
.dialogo { border: 0; border-radius: 24px; padding: 0; width: min(540px, calc(100vw - 1.5rem)); max-height: calc(100svh - 1.5rem); overflow-y: auto; box-shadow: 0 30px 80px -20px rgba(10, 10, 24, .45); color: var(--tinta); }
.dialogo::backdrop { background: rgba(10, 10, 24, .55); backdrop-filter: blur(4px); }
.dialogo form { padding: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (max-width: 480px) { .dialogo form { padding: 1.4rem 1.1rem; } }
.dialogo h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.resumen { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; background: var(--fondo); border-radius: 16px; padding: 1rem 1.1rem; font-size: .9rem; }
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; font-weight: 700; }
.pasos-compra { margin: 0; padding-left: 1.25rem; display: grid; gap: .45rem; font-size: .9rem; }
.pasos-compra li::marker { color: var(--marca-texto); font-weight: 800; }
.precio-final { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.precio-final strong { font-size: 1.8rem; font-weight: 900; }
.precio-final small { color: var(--suave); width: 100%; font-size: .8rem; }
.dialogo-acciones { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.nota { margin: 0; font-size: .78rem; color: var(--suave); }

@media (max-width: 900px) {
  .lema { display: none; }
  .barra { justify-content: space-between; }
  .estudio { grid-template-columns: 1fr; height: auto; }
  .panel { overflow: visible; border-right: 0; }
  .vista { height: 100svh; padding: .5rem .5rem .75rem; gap: .5rem; }
  .cierre { position: static; }
  .ir-vista { display: block; position: fixed; right: 4.75rem; bottom: 1rem; background: var(--marca-boton); color: #fff; font-weight: 700; padding: .8rem 1.2rem; border-radius: 50px; text-decoration: none; box-shadow: 0 8px 24px -8px rgba(248, 42, 94, .7); z-index: 5; }
  /* En un celular real la vista previa ocupa toda la pantalla, sin dibujar otro teléfono */
  .marco[data-disp="movil"] { display: block; }
  .marco[data-disp="movil"] .pantalla { position: absolute; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--linea), var(--sombra-h); }
  .vista-cabeza { flex-direction: column; align-items: stretch; }
  .disenos, .dispositivos { width: 100%; }
  .disenos legend { display: none; }
  .diseno, .dispositivos button { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Asistente inicial: primero los datos, después la vista previa ---------- */
.progreso-bloque, .asistente-nav { display: none; }

/* ---------- Bienvenida: la propuesta, cómo funciona y el precio ---------- */
.bienvenida { display: none; }
body[data-modo="bienvenida"] .bienvenida {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 1.5rem 2rem; align-items: start;
  width: min(1080px, 100%); margin: 0 auto; padding: clamp(2rem, 7vh, 4.5rem) 1rem 4rem;
}
#ingresar { display: none; white-space: nowrap; }
body[data-modo="bienvenida"] #ingresar { display: inline-flex; }
body[data-modo="bienvenida"] .estudio,
body[data-modo="bienvenida"] #reiniciar,
body[data-modo="bienvenida"] .ir-vista,
body[data-modo="bienvenida"] .saltar { display: none; }
.bienvenida-intro { grid-column: 1 / -1; max-width: 50rem; animation: entrar .4s ease both; }
.bienvenida-intro h1 { margin: 0 0 1rem; font-size: clamp(2.3rem, 5.6vw, 4rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; outline: none; }
.bienvenida-intro .bajada { margin: 0 0 1.75rem; color: var(--suave); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 38rem; }
.bienvenida-acciones { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; color: var(--suave); font-size: .88rem; font-weight: 600; }
.boton-grande { padding: 1.05rem 2rem; font-size: 1rem; }
.metodo, .plan-bienvenida { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1.4rem, 3vw, 2rem); animation: entrar .5s ease both; }
.metodo h2, .plan-bienvenida h2 { margin: 0 0 1.25rem; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.pasos-metodo { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: paso; }
.pasos-metodo li { position: relative; display: grid; gap: .2rem; padding-left: 3.1rem; counter-increment: paso; }
.pasos-metodo li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--degradado); color: #fff; font-weight: 900; font-size: .95rem;
}
.pasos-metodo li:not(:last-child)::after { content: ""; position: absolute; left: 1.08rem; top: 2.5rem; bottom: -.9rem; width: 2px; background: var(--linea); }
.pasos-metodo strong { font-size: 1rem; font-weight: 800; }
.pasos-metodo span { color: var(--suave); font-size: .9rem; }
.plan-bienvenida { display: grid; gap: .9rem; }
.plan-bienvenida h2 { margin-bottom: 0; }
.precio-grande { margin: 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.precio-grande strong { font-size: clamp(2.4rem, 4.5vw, 3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.precio-grande .precio-normal { color: var(--suave); font-size: 1.1rem; font-weight: 600; }
.precio-nota { margin: -.5rem 0 0; color: var(--marca-texto); font-weight: 700; font-size: .85rem; }
.etiqueta-lanzamiento { display: inline-block; padding: .25rem .6rem; border-radius: 50px; background: var(--degradado); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.plan-cabeza #plan-precio { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: .15rem .5rem; }
.plan-cabeza .precio-normal { color: var(--suave); font-weight: 600; font-size: .85rem; }
.plan-cabeza .etiqueta-lanzamiento { font-size: .62rem; }
.pago-unico { margin: 0; font-weight: 700; font-size: .9rem; }
.plan-bienvenida .incluye { font-size: .92rem; color: var(--tinta); gap: .5rem; }
.plan-bienvenida h3 { margin: .5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.extras { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .88rem; }
.extras li { display: flex; justify-content: space-between; gap: 1rem; }
.extras li span { color: var(--suave); }
.extras li b { white-space: nowrap; font-weight: 700; }
.plan-bienvenida .boton { margin-top: .5rem; }
.mejoras { display: grid; gap: .6rem; }
.mejora { border-radius: 14px; background: var(--marca-clara); border: 1px solid rgba(248, 42, 94, .18); font-size: .88rem; line-height: 1.5; }
.mejora summary { list-style: none; cursor: pointer; padding: .85rem 2.8rem .85rem 1rem; position: relative; font-weight: 700; color: var(--tinta); }
.mejora summary::-webkit-details-marker { display: none; }
.mejora summary::after { content: "+"; position: absolute; right: .8rem; top: 50%; translate: 0 -50%; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--marca-texto); font-weight: 800; transition: rotate .25s; }
.mejora[open] summary::after { rotate: 45deg; }
.mejora p { margin: 0; padding: 0 1rem .6rem; color: var(--suave); }
.mejora .mejora-precio { padding-bottom: .9rem; color: var(--tinta); }
.mejora .mejora-precio b { color: var(--marca-texto); font-size: 1.1rem; font-weight: 900; }
.ejemplos { grid-column: 1 / -1; min-width: 0; scroll-margin-top: 1rem; animation: entrar .45s ease both; }
.ejemplos-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: 1rem; }
.ejemplos-cabeza h2 { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; }
.ejemplos-cabeza p { margin: 0; color: var(--suave); font-size: .9rem; max-width: 34rem; }
.ejemplos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.ejemplo { display: grid; gap: .6rem; align-content: start; height: 100%; padding: .55rem .55rem .8rem; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 18px; box-shadow: var(--sombra); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ejemplo:hover { transform: translateY(-3px); box-shadow: var(--sombra-h); }
.ejemplo img { display: block; width: 100%; aspect-ratio: 8 / 5; height: auto; object-fit: cover; object-position: top; border-radius: 12px; background: var(--fondo-2); }
.ejemplo strong { display: block; padding: 0 .3rem; font-size: .92rem; font-weight: 800; line-height: 1.25; }
.ejemplo span { display: block; padding: 0 .3rem; color: var(--suave); font-size: .78rem; line-height: 1.35; }
.ejemplo em { display: block; padding: 0 .3rem; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--marca-texto); }
@media (max-width: 1080px) {
  .ejemplos-lista { grid-template-columns: repeat(5, 230px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
  .ejemplos-lista li { scroll-snap-align: start; }
}
@media (max-width: 860px) {
  body[data-modo="bienvenida"] .bienvenida { grid-template-columns: minmax(0, 1fr); }
  .bienvenida-acciones .boton, .bienvenida-acciones .boton-linea { width: 100%; }
}
body[data-modo="inicio"], body[data-modo="bienvenida"] {
  background-color: #fff;
  background-image:
    radial-gradient(40% 35% at 85% 0%, rgba(248, 42, 94, .09), transparent 70%),
    radial-gradient(35% 30% at 5% 30%, rgba(192, 38, 211, .06), transparent 70%),
    linear-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .025) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
}
body[data-modo="inicio"] .vista,
body[data-modo="inicio"] .cierre,
body[data-modo="inicio"] .ir-vista,
body[data-modo="inicio"] #reiniciar { display: none; }
body[data-modo="inicio"] .barra { justify-content: space-between; }
body[data-modo="inicio"] .estudio { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 64px); }
body[data-modo="inicio"] .panel { border-right: 0; background: transparent; overflow: visible; width: min(660px, 100%); margin: 0 auto; padding: clamp(1.75rem, 6vh, 4rem) 0 4rem; }
body[data-modo="inicio"] .panel-cabeza { padding: 0 1rem 1.75rem; }
body[data-modo="inicio"] .panel-cabeza h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; outline: none; margin-bottom: .75rem; }
body[data-modo="inicio"] .panel-cabeza p { font-size: 1rem; max-width: 34rem; }
body[data-modo="inicio"] form { padding: 0 1rem; flex: none; }
body[data-modo="inicio"] .paso:not(.actual) { display: none; }
body[data-modo="inicio"] .paso { border: 1px solid rgba(0, 0, 0, .08); box-shadow: var(--sombra); border-radius: var(--radio); animation: entrar .35s ease both; }
body[data-modo="inicio"] .paso summary { display: none; }
body[data-modo="inicio"] .campos { padding: 1.75rem; }
body[data-modo="inicio"] .progreso-bloque { display: block; margin-bottom: 1.25rem; }
body[data-modo="inicio"] .asistente-nav { display: flex; align-items: center; gap: .75rem; padding: 1.5rem 1rem 0; }
body[data-modo="inicio"] .paletas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.progreso-texto { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--marca-texto); }
.progreso-texto::before { content: ""; width: 1.4rem; height: 2px; background: currentColor; }
.progreso { height: 4px; border-radius: 999px; background: var(--fondo-2); overflow: hidden; max-width: 240px; }
.progreso span { display: block; height: 100%; width: 20%; background: var(--degradado); border-radius: inherit; transition: width .4s ease; }
.asistente-nav #siguiente { margin-left: auto; padding: .95rem 1.8rem; font-size: .95rem; }
.enlace-omitir { background: none; border: 0; color: var(--suave); font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: .5rem; }
.enlace-omitir:hover { color: var(--marca-texto); }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
body[data-modo="estudio"] .vista { animation: entrar .5s ease both; }

/* Compra */
.plan { border: 1px solid var(--linea); border-radius: 16px; padding: 1rem 1.1rem; }
.plan-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.plan-cabeza strong { font-size: 1rem; font-weight: 800; }
.plan-cabeza span { font-weight: 800; }
.incluye { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .86rem; color: var(--suave); }
.incluye li { display: flex; gap: .55rem; align-items: flex-start; }
.incluye li::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; border-radius: 50%; background: var(--marca-clara) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9204e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.adicionales { display: grid; gap: .6rem; }
.adicional { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-radius: 16px; background: var(--fondo); }
.adicional strong { display: block; font-size: .9rem; font-weight: 800; }
.adicional small { display: block; font-size: .78rem; color: var(--suave); }
.contador { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--linea-fuerte); border-radius: 50px; }
.contador button { width: 2.2rem; height: 2.2rem; border: 0; background: none; border-radius: 50%; font-size: 1.15rem; font-weight: 700; cursor: pointer; color: var(--marca-texto); }
.contador button:disabled { color: var(--linea-fuerte); cursor: default; }
.contador output { min-width: 1.6rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; padding-top: .9rem; border-top: 1px solid var(--linea); }
.total span { font-weight: 700; }
.total strong { font-size: 2rem; font-weight: 900; letter-spacing: -.02em; margin-left: auto; }
.total small { width: 100%; text-align: right; color: var(--suave); font-size: .78rem; }
.error-pago { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #fff0f2; color: var(--error); font-weight: 600; font-size: .86rem; }
/* Dominio propio */
.dns-opciones { display: grid; gap: .5rem; margin: 0; padding: .9rem; border: 1px solid var(--linea); border-radius: 16px; min-width: 0; }
.dns-opciones legend { padding: 0 .35rem; font-weight: 700; font-size: .84rem; }
.opcion-dns { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--linea); cursor: pointer; transition: border-color .2s, background .2s; }
.opcion-dns:has(input:checked) { border-color: var(--marca); background: var(--marca-clara); }
.opcion-dns input { margin-top: .2rem; accent-color: var(--marca-boton); flex: none; width: auto; }
.opcion-dns strong { display: block; font-size: .88rem; }
.opcion-dns strong em { font-style: normal; color: var(--marca-texto); margin-left: .25rem; }
.opcion-dns small { display: block; color: var(--suave); font-size: .78rem; line-height: 1.4; }
.medios-pago { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .6rem; border-radius: 14px; background: var(--fondo); }
.medios-pago span { width: 100%; text-align: center; font-weight: 700; font-size: .84rem; }
.medios-pago img { height: 34px; width: auto; }
.medios-pago img[src*="bancos"] { height: 50px; }
.logos-pago { display: flex !important; align-items: center; gap: .9rem; margin-top: .35rem; }
.logos-pago img { height: 30px; width: auto; }
.logos-pago img[src*="bancos"] { height: 44px; }
.nota-cambios { margin: 0; color: var(--suave); font-size: .8rem; line-height: 1.45; }
.nota-cambios a, .nota a { color: var(--marca-texto); font-weight: 600; }

/* Facturación */
.facturacion { display: grid; gap: .75rem; }
.datos-factura { display: grid; gap: .75rem; margin: 0; padding: 1rem; border: 1px solid var(--linea); border-radius: 16px; min-width: 0; }
.datos-factura .error { margin: 0; color: var(--error); font-weight: 600; font-size: .82rem; }
#pagar[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Adicionales de sí o no */
.adicional.opcion { cursor: pointer; border: 1px solid transparent; transition: border-color .2s, background .2s; }
.adicional.opcion:hover { border-color: var(--linea-fuerte); }
.adicional.opcion:has(input:checked) { background: var(--marca-clara); border-color: rgba(248, 42, 94, .35); }
.adicional.opcion > div { flex: 1; }
.precio-opcion { font-weight: 800; font-size: .88rem; white-space: nowrap; }
.interruptor { appearance: none; -webkit-appearance: none; flex: none; width: 2.6rem; height: 1.5rem; margin: 0; border-radius: 50px; background: var(--linea-fuerte); position: relative; cursor: pointer; transition: background .2s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.interruptor:checked { background: var(--marca-boton); }
.interruptor:checked::after { transform: translateX(1.1rem); }
.interruptor:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

/* Aviso de dominio */
.aviso-dominio { margin-top: -.5rem; padding: .7rem .9rem; border-radius: 12px; font-size: .82rem; line-height: 1.45; background: var(--fondo); color: var(--suave); }
.aviso-dominio[data-tipo="ok"] { background: #ecfbf3; color: #146c43; }
.aviso-dominio[data-tipo="alerta"] { background: #fff6e6; color: #8a5300; }
.aviso-dominio a { color: inherit; font-weight: 700; }
.opciones-dominio { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; color: var(--tinta); font-weight: 600; }
.opciones-dominio button { border: 1px solid var(--linea-fuerte); background: #fff; border-radius: 50px; padding: .25rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer; }
.opciones-dominio button:hover { border-color: var(--marca); color: var(--marca-texto); }

/* ---------- Portal Mi web del cliente ---------- */
body.portal { background: var(--fondo); }
.portal-principal { width: min(760px, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vh, 3rem) 1rem 4rem; display: grid; gap: 1rem; }
.portal-cabeza h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.portal-caja { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: .8rem; scroll-margin-top: 1rem; }
.portal-caja h1, .portal-caja h2 { margin: 0; font-size: 1.2rem; font-weight: 900; letter-spacing: -.02em; }
.portal-caja p { margin: 0; }
.portal-estado { font-size: .95rem; }
.portal-estado.ok { color: #0b6b35; font-weight: 600; }
.portal-estado.alerta { color: #9a5b00; }
.portal-estado.error { color: var(--error); }
.portal-estado a { color: inherit; }
.portal-detalle { color: var(--suave); font-size: .86rem; line-height: 1.5; }
.portal-detalle a, .portal-pie a { color: var(--marca-texto); font-weight: 600; }
.portal-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.portal-renovar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.portal-renovar span { color: var(--suave); font-size: .8rem; }
.portal-form { display: grid; gap: .9rem; }
.portal-form .boton { justify-self: start; }
.portal-aviso { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 12px; font-weight: 600; font-size: .9rem; }
.portal-aviso.ok { background: #e3f7ea; color: #0b6b35; }
.portal-aviso.error { background: #fff0f2; color: var(--error); }
.portal-solicitudes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.solicitud { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--linea); border-radius: 16px; scroll-margin-top: 1rem; }
.solicitud:target { border-color: var(--marca); box-shadow: 0 0 0 1.5px var(--marca); }
.solicitud-cabeza { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: var(--suave); }
.pastilla-estado { padding: .25rem .65rem; border-radius: 50px; background: var(--fondo-2); color: var(--tinta); font-weight: 700; font-size: .72rem; }
.solicitud[data-estado="cotizada"] .pastilla-estado { background: #fff4e0; color: #9a5b00; }
.solicitud[data-estado="en_proceso"] .pastilla-estado { background: var(--marca-clara); color: var(--marca-texto); }
.solicitud[data-estado="lista"] .pastilla-estado { background: #e3f7ea; color: #0b6b35; }
.solicitud-texto { font-size: .92rem; }
.solicitud-respuesta { font-size: .88rem; padding: .7rem .85rem; border-radius: 12px; background: var(--fondo); }
.portal-intro { margin: .9rem 0 .6rem; color: var(--suave); font-size: .95rem; }
.portal-usos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.portal-usos li { display: grid; gap: .2rem; padding: .85rem 1rem .85rem 2.6rem; position: relative; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 16px; }
.portal-usos li::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--marca-clara) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9204e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.portal-usos strong { font-size: .92rem; }
.portal-usos span { color: var(--suave); font-size: .82rem; line-height: 1.4; }
.portal-pie { text-align: center; color: var(--suave); font-size: .85rem; margin: .5rem 0 0; }

.pie-legal { padding: 1.5rem 1rem 5rem; text-align: center; font-size: .8rem; color: var(--suave); }
.pie-legal a { color: inherit; }

/* WhatsApp flotante */
.wsp { position: fixed; right: 1rem; bottom: 1rem; z-index: 6; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 24px -8px rgba(10, 10, 24, .45); transition: transform .15s; }
.wsp:hover { transform: scale(1.06); }
.wsp svg { width: 1.9rem; height: 1.9rem; }
@media (min-width: 901px) { .wsp { right: 1.5rem; bottom: 1.5rem; width: 3.6rem; height: 3.6rem; } }
.nota-wsp { text-align: center; font-size: .85rem; }