/* Tienda publica del revendedor. --marca y --marca-2 las inyecta el layout
   con los colores que el revendedor configuro en su panel. */

:root {
    --tinta: #14202e;
    --gris: #667085;
    --linea: #e5e9f0;
    --papel: #fff;
    --fondo: #fbfcfe;
    --exito: #067a53;
    --alerta: #9a6700;
    --error: #b42318;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Urbanist", system-ui, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.55;
}

h1, h2, h3 { font-family: "Lexend Deca", system-ui, sans-serif; line-height: 1.15; }

.ancho { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }
.seccion { padding: 2.5rem 1.25rem; }
.seccion__titulo { font-size: 1.35rem; margin: 0 0 1.25rem; }
.seccion__nota { color: var(--gris); font-size: .85rem; margin-top: 1rem; }

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Cabecera ---- */
.cabecera { background: var(--papel); border-bottom: 1px solid var(--linea); }

.cabecera__interior {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 68px; flex-wrap: wrap;
}

.logotipo {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700; font-size: 1.15rem;
    color: var(--marca); text-decoration: none;
}

.cabecera__nota { color: var(--gris); font-size: .82rem; }

/* ---- Portada ---- */
.portada {
    padding: 4rem 0 3rem;
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--marca) 12%, transparent), transparent 55%),
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--marca-2) 10%, transparent), transparent 50%);
}

.portada__titulo {
    font-size: clamp(1.9rem, 5vw, 3rem);
    margin: 0 0 .75rem;
    max-width: 18ch;
    text-wrap: balance;
}

.portada__bajada { color: var(--gris); font-size: 1.05rem; margin: 0 0 2rem; max-width: 50ch; }

/* ---- Buscador: el centro de la tienda ---- */
.buscador { max-width: 620px; }
.buscador__etiqueta { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }

.buscador__caja {
    display: flex; gap: .5rem;
    background: var(--papel);
    border: 2px solid var(--linea);
    border-radius: 14px;
    padding: .4rem;
    transition: border-color .15s ease;
}

.buscador__caja:focus-within { border-color: var(--marca); }

.buscador__caja input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 1.05rem;
    border: 0; outline: 0; background: transparent;
    padding: .6rem .75rem; color: inherit;
}

.buscador__ayuda { color: var(--gris); font-size: .82rem; margin: .75rem 0 0; }
.buscador--compacto { max-width: 620px; margin: 0; }

.franja-busqueda { background: var(--papel); border-bottom: 1px solid var(--linea); padding: 1.25rem 0; }

/* ---- Botones ---- */
.btn {
    font: inherit; font-weight: 600;
    padding: .75rem 1.4rem;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--papel); color: var(--tinta);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    display: inline-block;
}

.btn--marca { background: var(--marca); color: #fff; }
.btn--marca:hover { filter: brightness(.92); }
.btn--grande { padding: .9rem 1.75rem; font-size: 1.02rem; }
.btn:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* ---- Precios ---- */
.rejilla-precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.precio-caja {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
}

.precio-caja__tipo { font-size: .95rem; margin: 0 0 .75rem; color: var(--gris); font-weight: 600; }
.precio-caja__monto { font-family: "Lexend Deca", sans-serif; font-size: 1.9rem; font-weight: 700; margin: 0; color: var(--marca); }
.precio-caja__periodo { color: var(--gris); font-size: .82rem; margin: .25rem 0 0; }

/* ---- Pasos ---- */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; counter-reset: paso; }

.paso { counter-increment: paso; }

.paso__titulo { font-size: 1rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .6rem; }

.paso__titulo::before {
    content: counter(paso);
    background: color-mix(in srgb, var(--marca) 12%, transparent);
    color: var(--marca);
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .85rem; flex: none;
}

.paso p { color: var(--gris); margin: 0; font-size: .92rem; }

/* ---- Resultado de busqueda ---- */
.resultado {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.resultado--libre { border-color: color-mix(in srgb, var(--exito) 30%, var(--linea)); }

.resultado__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.resultado__dominio { font-size: clamp(1.3rem, 4vw, 2rem); margin: 0; overflow-wrap: anywhere; }

.marbete { padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.marbete--libre { background: #e6f6ef; color: var(--exito); }
.marbete--tomado { background: #fdeceb; color: var(--error); }

.resultado__precio { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 1.5rem; }
.resultado__monto { font-family: "Lexend Deca", sans-serif; font-size: 2rem; font-weight: 700; color: var(--marca); }
.resultado__periodo { color: var(--gris); }
.resultado__mensaje { color: var(--gris); margin: 0; }

/* ---- Formulario de contratacion ---- */
.contratar { border-top: 1px solid var(--linea); padding-top: 1.5rem; }
.contratar__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.contratar__nota { color: var(--gris); font-size: .82rem; margin: .75rem 0 0; }

.campo-t { display: flex; flex-direction: column; gap: .35rem; }
.campo-t--corto { max-width: 260px; }
.campo-t__etiqueta { font-weight: 600; font-size: .88rem; }
.campo-t__ayuda { color: var(--gris); font-size: .78rem; }

.campo-t input, .campo-t select {
    font: inherit;
    padding: .65rem .8rem;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--papel);
    color: inherit;
    width: 100%;
}

.campo-t input:focus-visible, .campo-t select:focus-visible {
    outline: 2px solid var(--marca); outline-offset: 1px;
}

.avanzado { margin-bottom: 1.25rem; }
.avanzado summary { cursor: pointer; font-size: .9rem; color: var(--marca); font-weight: 600; padding: .5rem 0; }

/* ---- Alternativas ---- */
.rejilla-alternativas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }

.alternativa {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    text-decoration: none; color: inherit;
}

.alternativa:hover { border-color: var(--marca); }
.alternativa__nombre { font-weight: 600; overflow-wrap: anywhere; }
.alternativa__ver { color: var(--marca); font-size: .85rem; font-weight: 600; flex: none; }

/* ---- Orden ---- */
.orden {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 2rem;
    max-width: 640px;
}

.orden__paso { color: var(--gris); font-size: .82rem; font-weight: 600; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }
.orden__titulo { font-size: 1.6rem; margin: 0 0 1.5rem; }

.orden__resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linea); }
.orden__resumen dt { color: var(--gris); font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.orden__resumen dd { margin: 0; font-weight: 600; }
.orden__dominio { overflow-wrap: anywhere; }

.orden__bloque { margin-top: 1.75rem; }
.orden__subtitulo { font-size: 1.05rem; margin: 0 0 .5rem; }
.orden__bloque p { color: var(--gris); margin: 0 0 .5rem; }
.orden__contacto { font-size: .9rem; }
.orden__guardar { color: var(--gris); font-size: .82rem; margin-top: 2rem; }

.subida { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.subida .campo-t { width: 100%; }

/* ---- Formas de pago ---- */
.pagos { margin-top: 1.75rem; }

.pagos__pestanas {
    display: flex; flex-wrap: wrap; gap: .4rem;
    border-bottom: 1px solid var(--linea);
    margin-bottom: 1.5rem;
}

.pestana {
    font: inherit; font-weight: 600; font-size: .92rem;
    background: none; border: 0; cursor: pointer;
    padding: .7rem 1rem;
    color: var(--gris);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.pestana:hover { color: var(--tinta); }
.pestana--activa { color: var(--marca); border-bottom-color: var(--marca); }
.pestana:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

.pagos__panel p { color: var(--gris); margin: 0 0 .75rem; }
.pagos__panel p strong { color: var(--tinta); }

.cuenta { margin: 1rem 0; display: grid; gap: .1rem; }
.cuenta__fila { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linea); }
.cuenta__fila:last-child { border-bottom: 0; }
.cuenta dt { color: var(--gris); font-size: .85rem; min-width: 120px; margin: 0; }
.cuenta dd { margin: 0; }
.cuenta__numero { font-family: ui-monospace, "Courier New", monospace; font-size: 1.05rem; user-select: all; }

.paypal-caja { margin-top: 1.25rem; max-width: 420px; }

.orden__total { color: var(--marca); font-size: 1.15rem; }

/* ---- Notas ---- */
.nota { padding: .9rem 1.1rem; border-radius: 12px; margin: 1.25rem 0; border: 1px solid; font-size: .95rem; }
.nota--exito { background: #e6f6ef; border-color: #a9dfc8; color: var(--exito); }
.nota--error { background: #fdeceb; border-color: #f3bdb7; color: var(--error); }
.nota--aviso { background: #fff8e5; border-color: #f0dca4; color: var(--alerta); }

/* ---- Cabecera: ingresar ---- */
.cabecera__derecha { display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.cabecera__ingresar {
    color: var(--gris); text-decoration: none; font-size: .88rem; font-weight: 600;
    padding: .4rem .8rem; border-radius: 8px; border: 1px solid var(--linea);
}

.cabecera__ingresar:hover { color: var(--marca); border-color: var(--marca); }

/* ---- Volver desde la orden ---- */
.orden__volver { margin-top: 1.5rem; }

/* ---- Conexion del dominio (contratar) ---- */
.conexion { border: 1px solid var(--linea); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.conexion__titulo { font-size: .88rem; font-weight: 600; padding: 0 .3rem; }

.conexion__opcion {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .55rem .2rem; cursor: pointer; font-size: .92rem;
}

.conexion__opcion input { margin-top: .2rem; flex: none; }
.conexion__recomendado { display: block; color: var(--marca); font-size: .78rem; font-weight: 600; margin-top: .15rem; }
.conexion__panel { padding: .25rem .2rem 1rem 1.9rem; }

/* ---- Formulario de contacto (pie) ---- */
.contacto { padding: 2.5rem 0; border-bottom: 1px solid var(--linea); }
.contacto__titulo { font-size: 1.3rem; margin: 0 0 .35rem; }
.contacto__ayuda { color: var(--gris); margin: 0 0 1.5rem; }
.contacto__formulario { display: grid; gap: 1rem; max-width: 620px; }
.contacto__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.contacto__formulario textarea { resize: vertical; }

/* Trampa para bots: invisible mas no display:none, para no delatarse a filtros simples. */
.campo-t-website { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Pie ---- */
.pie-tienda { border-top: 1px solid var(--linea); background: var(--papel); margin-top: 2rem; }
.pie-tienda__interior { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 1.5rem; color: var(--gris); font-size: .85rem; }

/* ---- Pagina "en construccion" ---- */
.proximamente { padding: 5rem 0; display: flex; justify-content: center; }

.proximamente__caja {
    max-width: 480px; text-align: center; display: flex; flex-direction: column; align-items: center;
}

.proximamente__marca { color: var(--marca); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.5rem; }

.proximamente__icono {
    width: 72px; height: 72px; border-radius: 20px;
    background: color-mix(in srgb, var(--marca) 10%, transparent);
    color: var(--marca);
    display: grid; place-items: center;
    margin-bottom: 1.5rem;
}

.proximamente__icono svg { width: 34px; height: 34px; }
.proximamente__titulo { font-size: 1.7rem; margin: 0 0 .75rem; }
.proximamente__texto { color: var(--gris); margin: 0 0 2rem; }

@media (max-width: 640px) {
    .portada { padding: 2.5rem 0 2rem; }
    .buscador__caja { flex-direction: column; }
    .buscador__caja .btn { width: 100%; }
    .resultado, .orden { padding: 1.5rem; }
    .cabecera__interior { flex-wrap: wrap; row-gap: .5rem; }
}