/* miraloquehago — hoja de la home y de los términos.
   Parte de la guía visual de VIBE (Marca/Claude_guia-visual-vibe.html): Nunito, blanco, un solo color.
   Solo para celular: en la computadora se ve la misma columna en el centro. */
:root{
  --fuerte:#152A43; --banda:#E6ECF2; --linea:#E4E8ED; --suave:#F5F7F9;
  --texto:#0F1721; --texto-2:#6B7684;
  --ff:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --t-mini:14px; --t-chico:15px; --t-base:17px; --t-grande:20px; --t-titulo:27px; --t-numero:37px;
  --alto-boton:52px; --r:8px;
  --sombra:0 0 0 1px var(--linea), 0 1px 3px rgba(15,23,33,.08);
  --columna:440px;
}
*{box-sizing:border-box}
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--suave); color:var(--texto); font-family:var(--ff); font-size:var(--t-base); line-height:1.5}
.telefono{max-width:var(--columna); min-height:100vh; margin:0 auto; background:#fff; box-shadow:0 0 0 1px var(--linea); overflow-x:clip}
h1,h2,h3{margin:0; font-weight:800; line-height:1.2; color:var(--fuerte)}
h1{font-size:var(--t-numero)}
h2{font-size:var(--t-titulo); margin-bottom:12px}
h3{font-size:var(--t-grande); margin-bottom:6px}
p{margin:0 0 12px}
a{color:var(--fuerte)}
:focus-visible{outline:2px solid var(--fuerte); outline-offset:2px}

.encabezado{display:flex; align-items:center; gap:10px; min-height:60px; padding:10px 16px; border-bottom:1px solid var(--linea)}
.marca{font-size:var(--t-grande); font-weight:800; color:var(--fuerte); text-decoration:none; letter-spacing:-.2px}
.marca b{color:var(--texto-2); font-weight:800}
.encabezado .atras{margin-left:auto; font-weight:700; text-decoration:none}

.bloque{padding:28px 16px; border-bottom:1px solid var(--linea)}
.bloque:last-of-type{border-bottom:0}
.bajada{color:var(--texto-2); font-size:var(--t-grande)}

.boton{display:flex; align-items:center; justify-content:center; width:100%; min-height:var(--alto-boton); padding:0 16px; margin:0 0 10px;
  background:#fff; color:var(--texto); border:0; border-radius:var(--r); box-shadow:var(--sombra);
  font:inherit; font-weight:800; text-decoration:none; cursor:pointer}
.boton:hover{box-shadow:0 0 0 1px var(--fuerte), 0 1px 3px rgba(15,23,33,.08)}
.boton.lleno{background:var(--fuerte); color:#fff; box-shadow:none}

.lista{margin:0; padding:0; list-style:none}
.lista li{display:flex; gap:12px; padding:10px 0}
.lista .ico{flex:none; width:28px; height:28px; color:var(--fuerte)}
.lista strong{display:block}
.lista span{color:var(--texto-2)}

.pasos{margin:0 0 20px; padding:0; list-style:none; counter-reset:paso}
.pasos li{position:relative; padding:0 0 14px 44px; counter-increment:paso}
.pasos li::before{content:counter(paso); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%;
  background:var(--banda); color:var(--fuerte); font-weight:800; display:flex; align-items:center; justify-content:center}
.rotulo{margin:0 0 8px; color:var(--texto-2); font-size:var(--t-chico); font-weight:800; text-transform:uppercase; letter-spacing:.5px}

.mensaje{margin:0 0 4px; padding:12px 14px; background:#E7F2EE; border-radius:var(--r) var(--r) var(--r) 2px; font-size:var(--t-chico); white-space:pre-line}

.plan{margin:0 0 12px; padding:16px; border-radius:var(--r); box-shadow:var(--sombra)}
.plan .precio{margin:4px 0 8px; font-size:var(--t-titulo); font-weight:800; color:var(--fuerte)}
.plan .precio small{font-size:var(--t-chico); color:var(--texto-2); font-weight:700}
.plan .anual{margin:-4px 0 12px; font-weight:700; color:var(--texto-2)}
.plan ul{margin:0; padding-left:20px}
.nota{color:var(--texto-2); font-size:var(--t-chico)}

.pie{padding:20px 16px 28px; background:var(--suave); color:var(--texto-2); font-size:var(--t-chico); text-align:center}
.pie a{color:var(--texto-2)}
.pie p{margin:0 0 6px}
.pie-principal{display:flex; justify-content:center; gap:8px}
.pie .pie-ayuda{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border:0; background:none; color:var(--fuerte); font:inherit; font-size:var(--t-base); font-weight:800; text-decoration:underline; cursor:pointer}

/* Menú de idiomas, arriba a la derecha */
.idiomas{position:relative; margin-left:auto; flex:none}
.idioma-boton{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 10px; border:0; border-radius:var(--r); background:none;
  color:var(--texto); font:inherit; font-size:var(--t-chico); font-weight:700; cursor:pointer}
.idioma-boton:hover, .idioma-boton[aria-expanded=true]{background:var(--banda)}
.idioma-boton .flecha{width:16px; height:16px}
.bandera{display:inline-flex; flex:none; width:24px; height:16px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px var(--linea)}
.bandera svg{width:100%; height:100%; display:block}
.idioma-menu{position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:250px; margin:0; padding:6px; list-style:none;
  background:#fff; border-radius:var(--r); box-shadow:0 0 0 1px var(--linea), 0 8px 24px rgba(15,23,33,.12)}
.idioma-menu[hidden]{display:none}
.idioma-menu button{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:0 12px; border:0; border-radius:6px;
  background:none; color:var(--texto); font:inherit; font-weight:700; text-align:left; cursor:pointer}
.idioma-menu button:hover{background:var(--suave)}
.idioma-menu [aria-checked=true]{background:var(--banda)}
.idioma-menu [aria-disabled=true]{color:var(--texto-2); cursor:default}
.idioma-menu [aria-disabled=true]:hover{background:none}
.idioma-menu small{margin-left:auto; padding-left:8px; white-space:nowrap; font-size:var(--t-mini); font-weight:700; color:var(--texto-2)}

/* Términos */
.legal h2{font-size:var(--t-grande); margin:22px 0 8px}
.legal ul{margin:0 0 12px; padding-left:20px}
.legal li{margin-bottom:6px}

/* Foto del encabezado */
/* Tres fotos (arte, música, gastronomía) separadas por dos diagonales blancas.
   Bajita: en el celular, con la barra de arriba, no pasa del 30% de la pantalla. */
.cabecera{position:relative; height:clamp(110px, 18vh, 170px); background:#fff; overflow:hidden}
.cabecera img{position:absolute; top:0; height:100%; object-fit:cover}
.cabecera .franja-1{left:0; width:36.6%; clip-path:polygon(0 0, 100% 0, 78.1% 100%, 0 100%)}
.cabecera .franja-2{left:29.4%; width:41.2%; clip-path:polygon(19.4% 0, 100% 0, 80.6% 100%, 0 100%)}
.cabecera .franja-3{left:63.4%; width:36.6%; clip-path:polygon(21.9% 0, 100% 0, 100% 100%, 0 100%)}

/* Referidos */
.destacado{margin:16px 0 0; padding:16px; border-radius:var(--r); background:var(--banda)}
.destacado p{margin:0}

/* Botón de ayuda y su ventana */
.boton-ayuda{margin-left:auto; flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--banda); color:var(--fuerte);
  font:inherit; font-size:var(--t-grande); font-weight:800; cursor:pointer}
dialog{width:100%; max-width:var(--columna); height:100%; max-height:100%; margin:0 auto; padding:0; border:0; background:#fff; color:var(--texto)}
dialog::backdrop{background:rgba(15,23,33,.5)}
.hoja{display:flex; flex-direction:column; height:100%}
.hoja-arriba{display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 8px 8px 16px; border-bottom:1px solid var(--linea)}
.hoja-arriba h2{flex:1; margin:0; font-size:var(--t-grande)}
.cerrar{min-height:44px; padding:0 12px; border:0; border-radius:var(--r); background:none; color:var(--texto); font:inherit; font-weight:800; cursor:pointer}
.hoja-cuerpo{flex:1; overflow-y:auto; padding:20px 16px}
.hoja-abajo{padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea)}
.hoja-abajo .boton{margin:0}

/* Formulario «Quiero mi tienda»: una columna, campos altos, texto de 17px (el teléfono no hace zoom). */
.campo{margin:0 0 16px; padding:0; border:0; min-width:0}
.campo label, .campo legend{display:block; margin:0 0 6px; padding:0; font-weight:800}
.opcional{color:var(--texto-2); font-weight:700; font-size:var(--t-chico)}
.campo input:not([type=radio]):not([type=checkbox]), .campo select, .campo textarea{
  display:block; width:100%; min-height:var(--alto-boton); padding:10px 12px; border:1px solid #C9D1DA; border-radius:var(--r);
  background:#fff; color:var(--texto); font:inherit}
.campo textarea{min-height:96px; resize:vertical}
.campo [aria-invalid=true]{border-color:#C2432F !important; box-shadow:0 0 0 1px #C2432F}
.opciones{display:flex; flex-wrap:wrap; gap:8px}
.opcion{display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border-radius:var(--r); box-shadow:var(--sombra); font-weight:700; cursor:pointer}
.campo .opcion{display:flex; margin:0; padding:0 16px; min-width:104px}
.opcion input{width:22px; height:22px; margin:0; accent-color:var(--fuerte)}
.acepta{margin:4px 0 0; padding:10px 14px; box-shadow:none; background:var(--suave); font-weight:700}
.ayuda-campo{margin:8px 0 0; color:var(--texto-2); font-size:var(--t-chico)}
.ayuda-campo.arriba{margin:0 0 10px}
.campo .opcion[hidden]{display:none}
.error{margin:6px 0 0; color:#C2432F; font-size:var(--t-chico); font-weight:700}
.error:empty{display:none}
.error.general{margin-top:12px}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.hoja-abajo .boton[hidden]{display:none}