/* Zolteva · alta de prueba — estilo "Cartel" (naranja/negro) de Pedro.
   Mobile-first: Pedro completa el alta en su iPhone, de pie, con el dueño delante. */
:root{
  --naranja:#f08a1a;
  --negro:#111;
  --crema:#fff7ea;
  --crema-osc:#f3e9d6;
  --verde:#1f7a3c;
  --rojo:#b3261e;
  --borde:#111;
}
/* Archivo (Google Fonts, licencia OFL) servida desde alta/assets/ — sin CDN.
   Un solo archivo variable cubre 400/700/900 (misma técnica que usa Google:
   tres @font-face con el mismo src, el navegador interpola el peso pedido). */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/Archivo-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("assets/Archivo-variable.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url("assets/Archivo-variable.woff2") format("woff2");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--crema);
  color:var(--negro);
  line-height:1.4;
  font-size:17px; /* >=16px evita el zoom automático de iOS en los inputs */
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.w{max-width:620px;margin:0 auto;padding:0 18px}

/* Cabecera naranja, como el cartel */
header.top{background:var(--naranja);padding:18px 0;border-bottom:4px solid var(--negro)}
header.top .w{display:flex;align-items:center;justify-content:space-between}
.marca{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:22px}
.marca small{font-weight:600;text-transform:none;font-size:13px;opacity:.75;display:block}
.lang-switch{display:flex;gap:0;border:3px solid var(--negro);border-radius:999px;overflow:hidden;background:var(--crema)}
.lang-switch button{border:0;background:transparent;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer;min-height:44px;min-width:44px}
.lang-switch button[aria-pressed="true"]{background:var(--negro);color:var(--crema)}

.hero{padding:28px 0 20px}
.ante{font-weight:700;letter-spacing:.01em;font-size:12px;border-top:4px solid var(--negro);padding-top:10px;display:inline-block}
.hero h1{font-size:30px;line-height:1.1;font-weight:900;text-transform:uppercase;margin:14px 0 10px}
.hero p{font-size:16px;max-width:520px}

main{padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))}

/* progreso */
.progress-wrap{margin:8px 0 4px}
.progress-track{height:10px;background:var(--crema-osc);border:2px solid var(--negro);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:var(--naranja)}
.step-label{font-size:13px;font-weight:700;margin:4px 0 8px;letter-spacing:.01em}

/* min-width:0 anula el min-width:min-content por defecto del user agent en
   <fieldset>: sin esto, el fieldset nunca se encoge por debajo del ancho
   mínimo de su contenido y la lista de servicios (hallazgo 4) se sale del
   viewport a 390/360px en vez de encogerse y truncar con elipsis. */
fieldset{border:3px solid var(--negro);border-radius:14px;padding:14px;margin:0 0 20px;background:#fff;min-width:0}
/* La leyenda de cada <fieldset> repite literalmente lo que ya dice la barra de
   progreso («Step 2 of 7 · Your business» + «Your business» debajo). Se saca
   de la vista (hallazgo 3) pero se deja en el DOM: sigue anunciando el grupo
   a lectores de pantalla sin repetirse para quien ve la pantalla. */
legend{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hint{font-size:14px;opacity:.75;margin:0 0 14px}

.field-row{display:flex;gap:12px}
.field-row .field{flex:1;min-width:0}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:4px}
.field .opt{font-weight:400;opacity:.6}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=time],select,textarea{
  width:100%;padding:14px 12px;font-size:17px;border:2px solid var(--negro);border-radius:10px;background:#fff;color:var(--negro);
  font-family:inherit;min-height:52px;
}
textarea{min-height:80px}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--negro) 50%),linear-gradient(135deg,var(--negro) 50%,transparent 50%);background-position:calc(100% - 22px) center,calc(100% - 16px) center;background-size:7px 7px,7px 7px;background-repeat:no-repeat}
.err{color:var(--rojo);font-size:13px;font-weight:700;margin-top:6px}
.field.has-err input, .field.has-err select{border-color:var(--rojo)}

/* chips (selector de idioma, paso 5): sin tocar, fuera del alcance de la tanda 2 */
.chip-list{display:flex;flex-direction:column;gap:10px}
.chip{display:flex;align-items:flex-start;gap:12px;border:2px solid var(--negro);border-radius:10px;padding:12px;background:#fff}
.chip input[type=checkbox],.chip input[type=radio]{width:22px;height:22px;flex:none;margin-top:2px}
.chip .chip-body{flex:1;min-width:0}
.chip .chip-name{font-weight:800;font-size:15px}
.chip .chip-row{display:flex;gap:8px;margin-top:6px;align-items:center}
.chip .chip-row input[type=number]{width:90px;min-height:40px;padding:6px}
.chip .chip-row label{font-size:12px;opacity:.7;white-space:nowrap}
/* vista previa del saludo (paso Voz): texto literal, no editable, bajo cada opción */
.chip .greet-preview{font-size:13px;opacity:.75;margin-top:6px;overflow-wrap:break-word}
.chip .greet-preview b{font-weight:700;opacity:.9}

/* avisos de citas (paso 2, "Tu negocio"): dos canales dentro de un .chip, con su
   propio input editable y, en el de SMS, una línea de permiso debajo. */
.field .avisos-permiso{display:flex;gap:10px;align-items:flex-start;margin:0;font-weight:400;font-size:13px;min-height:44px}
.avisos-permiso input[type=checkbox]{width:22px;height:22px;flex:none;margin-top:0}
#field-avisos.has-err .chip{border-color:var(--rojo)}

/* lista de servicios (hallazgo 4): una sola superficie con borde de 2px y filas
   separadas por una línea fina #f3e9d6, en vez de una caja de 2px por servicio
   (que sumada al fieldset de 3px y al borde del input de precio daba 3 bordes
   negros anidados). Clase propia (svc-*) para no tocar .chip/.chip-list, que
   el paso 5 (idioma) sigue usando tal cual. */
.svc-list{border:2px solid var(--negro);border-radius:10px;background:#fff;overflow:hidden}
/* padding vertical en vez de min-height fijo: la fila crece sola cuando el
   nombre del servicio pasa a dos líneas (ver .svc-name) en vez de recortarse
   con puntos suspensivos; con nombres de una línea queda igual que antes. */
.svc-row{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:56px;box-sizing:border-box}
.svc-row:not(:last-child){border-bottom:1px solid #f3e9d6}
.svc-row input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}
.svc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.svc-name{min-width:0;font-weight:800;font-size:14px;white-space:normal;overflow-wrap:break-word}
.svc-meta{display:flex;align-items:center;gap:4px;flex:none;align-self:center}
.svc-dollar{font-size:13px;font-weight:700;opacity:.7}
/* El input de precio no lleva el borde negro de 2px genérico de los demás
   campos: es justamente el 3er borde anidado que pide quitar el hallazgo 4. */
.svc-meta input[type=number]{width:52px;min-height:44px;padding:4px 6px;border:1px solid var(--crema-osc);border-radius:6px;font-size:14px;text-align:right}
/* Minutos (opcionales): solo se pintan si se activa «Set how long…», debajo del nombre. */
.svc-dur{display:flex;align-items:center;gap:6px;font-size:13px}
.svc-dur input[type=number]{width:64px;min-height:40px;padding:4px 6px;border:1px solid var(--crema-osc);border-radius:6px;font-size:14px;text-align:right}
.svc-row.has-err .svc-dur input{border-color:var(--rojo)}
.svc-err{font-size:12px;margin:0}
.svc-dur-toggle{display:flex;gap:10px;align-items:center;font-size:13px;min-height:44px;margin-top:8px}
.svc-dur-toggle input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}
/* Visualmente oculto pero presente para lectores de pantalla (misma técnica que
   la leyenda del hallazgo 3): "From $"/"Desde $" se sustituye por un "$" visual
   compacto para que la fila completa quepa en una sola línea a 390px. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
input[type=checkbox],input[type=radio]{accent-color:var(--negro)}
.btn-link{background:none;border:0;color:var(--negro);text-decoration:underline;font-weight:700;font-size:14px;padding:12px 6px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.add-service{display:flex;gap:8px;margin-top:12px}
.add-service input{flex:1}

/* horario */
.hours{display:flex;flex-direction:column;gap:10px}
.hour-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--crema-osc);padding-bottom:10px}
.hour-row .day{font-weight:800;width:44px;flex:none}
.hour-row input[type=time]{width:132px;min-height:44px;padding:6px}
.hour-row label.closed-lbl{display:flex;align-items:center;gap:8px;font-size:13px;min-height:44px;padding:4px 6px 4px 0}
.hour-row input[type=checkbox]{width:24px;height:24px;flex:none}

/* voces y plan: tarjetas grandes para pulgar */
.card-grid{display:flex;flex-direction:column;gap:12px}
.card{border:3px solid var(--negro);border-radius:14px;padding:16px;position:relative;background:#fff}
.card.selected{background:var(--naranja);color:var(--negro)}
.card input[type=radio]{position:absolute;top:16px;right:16px;width:24px;height:24px}
.card h3{margin:0 0 4px;font-size:17px;font-weight:800;max-width:calc(100% - 44px)}
.card p{margin:0;font-size:14px;opacity:.85}
.card .sample-btn{margin-top:10px;background:var(--negro);color:var(--crema);border:0;border-radius:8px;padding:10px 14px;font-weight:700;font-size:13px;min-height:44px}
.card .sample-btn[disabled]{opacity:.45}
.plan-card .price{font-size:28px;font-weight:900;margin:6px 0}
.plan-card .price small{font-size:14px;font-weight:600}
.plan-card .over{font-size:13px;opacity:.7}
.card.selected .over,.card.selected p{opacity:1}
.badge{display:inline-block;background:var(--negro);color:var(--naranja);font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;margin-bottom:8px}

/* resumen */
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.summary dt{font-weight:800;opacity:.7}
.summary dd{margin:0}
.consent{display:flex;gap:12px;align-items:flex-start;border:2px dashed var(--negro);border-radius:10px;padding:14px;margin:14px 0}
.consent input{width:24px;height:24px;flex:none;margin-top:2px}

/* navegación de pasos */
/* Bug Safari iPhone real (Pedro, hoy): la barra inferior de Safari + el atajo del
   teclado tapaban Back/Continue. Se añade el hueco seguro del notch/home-indicator
   más un margen fijo (por si env() no aplica, p.ej. en pruebas de escritorio). */
.nav-row{display:flex;gap:10px;margin-top:4px;padding-bottom:max(24px, env(safe-area-inset-bottom, 0px))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--negro);color:var(--crema);border:0;border-radius:10px;padding:16px 22px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:15px;min-height:54px;cursor:pointer;flex:1;text-decoration:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--negro);border:2px solid var(--negro);flex:0 0 auto;font-weight:700;text-transform:none;letter-spacing:normal}
.btn.big-call{background:var(--verde);font-size:20px;padding:22px}
.status-line{font-size:14px;font-weight:700;margin:10px 0;min-height:20px}
.status-line.error{color:var(--rojo)}
.draft-note{font-size:12px;opacity:.6;margin-top:6px}

/* pantalla final */
.live-screen{text-align:center;padding:30px 0}
.live-badge{display:inline-block;background:var(--verde);color:#fff;font-weight:900;text-transform:uppercase;padding:8px 16px;border-radius:999px;font-size:13px;margin-bottom:14px}
.live-number{font-size:40px;font-weight:900;letter-spacing:.01em;margin:10px 0 22px;word-break:break-word}
.carrier-list, .forward-box{text-align:left;margin-top:22px}
.forward-box h4[data-i18n="forward_title"]{text-transform:none;font-size:16px;margin-bottom:10px}
.forward-box .hint{font-size:13px;opacity:.75;margin-top:14px}
#live-done-btn{margin-top:22px}
#live-done-msg{font-weight:700}
.carrier{border:2px solid var(--negro);border-radius:10px;padding:14px;margin-bottom:10px}
.carrier h4{margin:0 0 6px;font-size:15px;text-transform:uppercase}
.carrier code{background:var(--crema-osc);padding:3px 8px;border-radius:6px;font-weight:800}
.carrier .src{font-size:12px;opacity:.65;margin-top:6px}
.sin-dato{font-style:italic;opacity:.7}

[hidden]{display:none !important}
.step{animation:none}

@media(min-width:720px){
  body{font-size:16px}
  .hero h1{font-size:46px}
  .chip-list{flex-direction:column}
}

/* Avisos por SMS: marcar «Text message / SMS» despliega el número y el permiso. */
.chip .chip-sub{display:block;font-size:13px;opacity:.7;margin-top:2px;overflow-wrap:anywhere}
.avisos-sms{border:2px solid var(--negro);border-top:0;border-radius:0 0 10px 10px;margin-top:-12px;padding:12px;background:#fff}
.avisos-sms .field{margin-bottom:8px}
.avisos-sms .field:last-child{margin-bottom:0}

/* Citas a la vez (paso Horario): cuatro botones de un toque. */
#field-citas_a_la_vez{margin-top:16px}
.seg{display:flex;border:2px solid var(--negro);border-radius:10px;overflow:hidden;background:#fff}
.seg label{flex:1;position:relative;margin:0 !important;font-size:17px !important}
.seg label + label{border-left:2px solid var(--negro)}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:52px;font-weight:900}
.seg input:checked + span{background:var(--negro);color:var(--crema)}
.seg input:focus-visible + span{outline:3px solid var(--naranja);outline-offset:-5px}
#citas-mas{margin-top:10px}
#citas-mas input{max-width:120px}

/* Enlaces a Terms y Privacy junto al consentimiento (solo si hay dirección). */
.legal-links{display:flex;gap:18px;margin:-4px 0 12px;font-size:14px;font-weight:700}
.legal-links a{min-height:44px;display:inline-flex;align-items:center}

/* ===================== «Cuéntaselo a Elena» =====================
   Burbujas con el mismo lenguaje que el «Ejemplo de llamada» de la portada
   (src/pages/llamada-ejemplo.css: borde negro de 2px, Elena en naranja con la esquina de abajo a la
   izquierda casi recta, el dueño a la derecha). Copiadas y adaptadas aquí: son proyectos aparte. */
.elena{padding:24px 0 8px}
.elena h1,.revision h1{font-size:28px;line-height:1.1;font-weight:900;text-transform:uppercase;margin:0 0 16px}
.revision h1:focus{outline:none}
.el-log{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.el-b{display:flex;align-items:flex-end;gap:8px;max-width:92%}
.el-b p{margin:0;padding:9px 12px;border:2px solid var(--negro);border-radius:14px;font-weight:600;font-size:16px;
  line-height:1.35;overflow-wrap:anywhere;min-width:0}
.el-b-elena{align-self:flex-start}
.el-b-elena p{background:var(--naranja);border-bottom-left-radius:3px}
.el-b-dueno{align-self:flex-end}
.el-b-dueno p{background:#fff;border-bottom-right-radius:3px}
.el-b{animation:el-entra .25s ease-out both}
@keyframes el-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Avatar: círculo con la «E» en los colores de la casa (o la imagen de data-elena-avatar). */
.el-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--negro);color:var(--naranja);
  border:2px solid var(--negro);display:inline-flex;align-items:center;justify-content:center;font-weight:900;
  font-size:17px;line-height:1;overflow:hidden}
.el-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.el-escribiendo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin:0 0 12px}
.el-puntos{display:inline-flex;gap:4px}
.el-puntos i{width:7px;height:7px;border-radius:50%;background:var(--negro);animation:el-punto 1.2s infinite ease-in-out}
.el-puntos i:nth-child(2){animation-delay:.2s}
.el-puntos i:nth-child(3){animation-delay:.4s}
@keyframes el-punto{0%,80%,100%{opacity:.25}40%{opacity:1}}

#el-form label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
#el-texto{min-height:0;resize:vertical;line-height:1.4}
.el-cuadro{margin:0 0 12px}
/* Con opciones: un solo recuadro con los botones arriba y la caja (una línea que crece) debajo. */
.el-cuadro.con-opciones{border:3px solid var(--negro);border-radius:14px;padding:10px;background:#fff}
.el-cuadro.con-opciones #el-texto{min-height:48px;resize:none;overflow-y:auto;max-height:160px;padding:11px 12px}
#el-texto::placeholder{color:#595959;opacity:1}
/* Botón de dictado junto a la caja (solo si el navegador trae la API de reconocimiento de voz). */
.el-texto-fila{display:flex;gap:8px;align-items:flex-start}
.el-texto-fila #el-texto{flex:1;min-width:0}
.el-dictar{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--negro);color:var(--crema);border:0;border-radius:10px;padding:10px 14px;
  font-weight:700;font-size:14px;line-height:1.2;min-height:52px;min-width:52px;cursor:pointer}
.el-dictar .el-dictar-ico{flex:none}
.el-dictar.dictando{background:var(--rojo)}
.el-dictar:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
.el-dictar-status{font-size:13px;font-weight:700;margin:6px 0 0}
.el-dictado{margin:10px 0 8px}
.el-rapidas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.el-rapidas .btn.ghost{flex:1 1 auto;font-family:inherit;min-height:48px;padding:10px 14px;font-size:15px;background:#fff;
  white-space:normal;text-align:center;line-height:1.25}
#el-enviar{width:100%}

.el-ejemplos{margin-top:22px;border-top:3px solid var(--negro);padding-top:12px}
.el-ej-tit{font-size:14px;font-weight:800;margin:0 0 10px}
.el-ej-lista{display:flex;flex-direction:column;gap:8px}
.el-ej{display:block;width:100%;text-align:left;font:inherit;font-size:15px;line-height:1.35;color:var(--negro);
  background:#fff;border:2px dashed var(--negro);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:44px}
.el-ej:focus-visible,.el-rapida:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
.el-alternativa{margin:18px 0 0;text-align:center}
.el-alternativa .btn-link{font-size:16px}

/* Aviso de privacidad (f) junto a la caja: discreto, pero con el contraste de un texto normal. */
.el-privacidad{font-size:13px;line-height:1.4;color:#3b382f;margin:0 0 12px}
.el-privacidad a{color:inherit;font-weight:700}

/* Revisión: secciones cortas cerradas con su resumen; «Cambiar» abre los controles de siempre ahí mismo. */
.revision{padding:20px 0 4px}
.rev-sec{border:3px solid var(--negro);border-radius:14px;background:#fff;padding:12px 14px;margin:0 0 12px}
.rev-sec.con-falta{border-color:var(--rojo);box-shadow:inset 6px 0 0 var(--rojo)}
.rev-cab{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rev-cab h2{flex:1 1 auto;margin:0;font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;min-width:0}
.rev-cab .btn-link{padding:10px 8px;font-size:15px}
.rev-resumen{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.rev-resumen p{margin:4px 0 0}
.rev-resumen ul{margin:4px 0 0;padding-left:20px}
.rev-resumen li{margin:2px 0}
.rev-resumen p:last-child:not(:first-child){opacity:.85}
.rev-falta{color:var(--rojo);font-weight:800;font-size:14px;margin:4px 0 0}
.rev-cuerpo{margin-top:10px}
.rev-cuerpo fieldset.step{margin:0;padding:0;border:0}
.rev-cuerpo legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rev-final{margin:18px 0 0}
.rev-final .consent{background:#fff}
#rev-sms .field{border:2px dashed var(--negro);border-radius:10px;padding:14px;margin:0 0 14px;background:#fff}
.rev-pendiente{color:var(--negro);font-weight:800;font-size:14px;margin:4px 0 0}
.rev-volver{text-align:center;margin:6px 0 0}
#rev-habituales{margin-top:4px}
.hour-row.has-err input[type=time]{border-color:var(--rojo)}
#volver-elena{margin-top:4px}
.aviso-elena{background:#fff;border:2px solid var(--negro);border-left-width:8px;border-radius:10px;padding:10px 12px;
  font-weight:700;font-size:15px;margin:16px 0 4px}

@media(min-width:720px){.elena h1,.revision h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){
  .el-b,.el-puntos i{animation:none}
}