/* =========================================
   PHONE PLANET - TIENDA VIRTUAL
   Cielo claro, colores vivos y un solo protagonista:
   el planeta de la portada.
========================================= */

:root {
    --cielo-fondo: #f5f8ff;
    --tinta: #14204a;
    --tinta-suave: #55638a;
    --linea: #dfe6f6;

    --cian: #12b5e5;
    --cian-suave: #dff5fd;
    --violeta: #6a4cf5;
    --violeta-suave: #ebe6ff;
    --rosa: #ff4f9a;
    --rosa-suave: #ffe3ef;
    --sol: #ffc53d;
    --sol-suave: #fff1cc;
    --verde: #1fbf6a;
    --verde-suave: #dcf8e9;
    --whatsapp: #25d366;

    --radio: 18px;
    --sombra: 0 10px 30px rgba(36, 52, 110, .10);
    --sombra-fuerte: 0 18px 44px rgba(36, 52, 110, .18);
    --fuente-titulo: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
    --fuente-texto: "DM Sans", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--cielo-fondo);
    color: var(--tinta);
    font-family: var(--fuente-texto);
    font-size: 16px;
    line-height: 1.5;
}

body.carrito-abierto,
body.pedido-abierto { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--violeta);
    outline-offset: 3px;
    border-radius: 6px;
}

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

/* ---------- ENCABEZADO ---------- */
.encabezado {
    position: sticky; top: 0; z-index: 50;
    width: 100%; min-height: 76px; padding: 10px 5%;
    display: flex; align-items: center; gap: 28px;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-imagen { display: block; width: 48px; height: 48px; object-fit: contain; }
.marca-texto {
    font-family: var(--fuente-titulo);
    font-size: 22px; font-weight: 800; letter-spacing: -.02em;
    color: var(--tinta); white-space: nowrap;
}

.navegacion { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.enlace {
    padding: 9px 16px; border-radius: 999px;
    color: var(--tinta-suave); font-size: 15px; font-weight: 500;
    transition: color .2s ease, background .2s ease;
}
.enlace:hover { color: var(--tinta); background: var(--cielo-fondo); }
.enlace.activo { color: var(--violeta); background: var(--violeta-suave); font-weight: 700; }

.busqueda {
    width: 260px; min-width: 150px; height: 44px; padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--linea); border-radius: 999px; background: var(--cielo-fondo);
    transition: border-color .2s, background .2s;
}
.busqueda:focus-within { border-color: var(--violeta); background: #fff; }
.busqueda > i { color: var(--tinta-suave); font-size: 14px; }
.busqueda input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; }
.busqueda input::placeholder { color: #8b97b8; }
.limpiar-busqueda { border: 0; background: transparent; color: var(--tinta-suave); font-size: 22px; line-height: 1; }

.acciones-encabezado { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icono-carrito {
    position: relative; width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%; background: var(--violeta); color: #fff;
    font-size: 18px; box-shadow: 0 8px 18px rgba(106, 76, 245, .35);
    transition: transform .2s, background .2s;
}
.icono-carrito:hover { transform: translateY(-2px) scale(1.04); background: #5a3de0; }
.contador-carrito {
    position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px;
    display: grid; place-items: center; border-radius: 999px; border: 2px solid #fff;
    background: var(--rosa); color: #fff; font-size: 11px; font-weight: 700;
}
.boton-login {
    height: 46px; padding: 0 18px; display: flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--linea); border-radius: 999px; background: #fff;
    color: var(--tinta); font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: border-color .2s, color .2s;
}
.boton-login:hover { color: var(--violeta); border-color: var(--violeta); }
.menu-movil {
    display: none; width: 46px; height: 46px; place-items: center;
    border: 1.5px solid var(--linea); border-radius: 50%; background: #fff; font-size: 18px;
}

/* ---------- PORTADA ---------- */
.portada {
    position: relative; isolation: isolate; overflow: hidden;
    width: 100%; min-height: 560px; padding: 64px 5% 110px;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center; gap: 36px;
    background:
        linear-gradient(180deg, transparent 72%, var(--cielo-fondo) 100%),
        radial-gradient(circle at 12% 18%, rgba(18, 181, 229, .20), transparent 38%),
        radial-gradient(circle at 88% 12%, rgba(255, 79, 154, .18), transparent 34%),
        radial-gradient(circle at 70% 90%, rgba(106, 76, 245, .16), transparent 40%),
        linear-gradient(180deg, #eaf4ff 0%, var(--cielo-fondo) 100%);
}
/* Estrellas suaves */
.portada::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
    background-image:
        radial-gradient(circle, rgba(106, 76, 245, .35) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(18, 181, 229, .35) 1.5px, transparent 2px),
        radial-gradient(circle, rgba(255, 79, 154, .30) 1.5px, transparent 2px);
    background-size: 190px 190px, 260px 260px, 330px 330px;
    background-position: 20px 30px, 120px 90px, 60px 150px;
}
.portada-contenido { max-width: 600px; }
.portada h1 {
    font-family: var(--fuente-titulo);
    font-size: clamp(40px, 5.4vw, 70px); font-weight: 800;
    line-height: 1.02; letter-spacing: -.035em; color: var(--tinta);
}
.descripcion { margin-top: 20px; max-width: 50ch; color: var(--tinta-suave); font-size: 18px; line-height: 1.65; }
.acciones-portada { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.boton-explorar {
    min-height: 54px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; color: #fff; font-size: 16px; font-weight: 700;
    background: linear-gradient(120deg, var(--violeta), var(--rosa));
    box-shadow: 0 12px 28px rgba(106, 76, 245, .38);
    transition: transform .2s, box-shadow .2s;
}
.boton-explorar:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(106, 76, 245, .48); }
.boton-ver-carrito {
    min-height: 54px; padding: 0 26px; display: inline-flex; align-items: center; gap: 10px;
    border: 2px solid var(--tinta); border-radius: 999px; background: #fff;
    font-size: 16px; font-weight: 700; transition: background .2s, color .2s;
}
.boton-ver-carrito:hover { background: var(--tinta); color: #fff; }

.portada-imagen {
    position: relative; min-width: 0; min-height: 380px;
    display: flex; align-items: center; justify-content: center;
}
/* El planeta: único gran adorno */
.planeta {
    position: absolute; z-index: -1;
    width: min(440px, 82%); aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, #ffffff 0%, rgba(255,255,255,0) 32%),
        linear-gradient(145deg, #3ccbf2 0%, var(--violeta) 55%, var(--rosa) 100%);
    box-shadow: 0 30px 70px rgba(106, 76, 245, .35);
}
.planeta::after {
    content: ""; position: absolute; left: -22%; right: -22%; top: 38%; height: 26%;
    border: 5px solid rgba(255, 197, 61, .9); border-radius: 50%;
    transform: rotate(-16deg);
}
.portada-imagen > img {
    display: block; width: 92%; max-height: 400px; object-fit: contain;
    filter: drop-shadow(0 22px 28px rgba(20, 32, 74, .30));
}
.globo {
    position: absolute; padding: 10px 16px; display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px; background: #fff; color: var(--tinta);
    font-size: 14px; font-weight: 700; box-shadow: var(--sombra-fuerte);
}
.globo i { font-size: 17px; }
.globo-uno { top: 8%; left: 0; }
.globo-uno i { color: var(--cian); }
.globo-dos { bottom: 10%; right: 0; }
.globo-dos i { color: var(--verde); }

/* ---------- BENEFICIOS ---------- */
.beneficios {
    position: relative; z-index: 2;
    width: min(1180px, 92%); margin: -64px auto 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.beneficio {
    display: flex; align-items: center; gap: 16px; padding: 20px 24px;
    border-radius: var(--radio); box-shadow: var(--sombra);
}
.beneficio-cielo { background: var(--cian-suave); }
.beneficio-verde { background: var(--verde-suave); }
.beneficio-rosa { background: var(--rosa-suave); }
.beneficio i {
    width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 16px; background: #fff; font-size: 24px;
}
.beneficio-cielo i { color: var(--cian); }
.beneficio-verde i { color: var(--verde); }
.beneficio-rosa i { color: var(--rosa); }
.beneficio span { display: flex; flex-direction: column; color: var(--tinta-suave); font-size: 14px; line-height: 1.4; }
.beneficio strong { color: var(--tinta); font-size: 16px; font-weight: 700; }

/* ---------- SECCIONES ---------- */
.seccion { width: min(1320px, 92%); margin: 0 auto; }
.titulo-seccion h2 {
    font-family: var(--fuente-titulo);
    font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; color: var(--tinta);
}
.titulo-seccion p { margin-top: 4px; color: var(--tinta-suave); font-size: 16px; }

.categorias { padding-top: 72px; }
.categorias .titulo-seccion { margin-bottom: 24px; }
.rejilla-categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tarjeta-categoria {
    min-width: 0; min-height: 124px; padding: 0 18px 0 0; overflow: hidden;
    display: flex; align-items: center; gap: 12px; text-align: left;
    border: 0; border-radius: 22px; background: var(--cielo-fondo);
    transition: transform .2s, box-shadow .2s;
}
.tarjeta-categoria:hover { transform: translateY(-5px); box-shadow: var(--sombra-fuerte); }
.c-rosa { background: var(--rosa-suave); }
.c-amarillo { background: var(--sol-suave); }
.c-violeta { background: var(--violeta-suave); }
.c-cielo { background: var(--cian-suave); }
.tarjeta-categoria img { width: 40%; height: 124px; object-fit: contain; flex-shrink: 0; }
.texto-categoria { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.texto-categoria strong { font-family: var(--fuente-titulo); font-size: 19px; font-weight: 700; color: var(--tinta); }
.texto-categoria small { color: var(--tinta-suave); font-size: 13px; line-height: 1.35; }
.flecha-categoria {
    margin-left: auto; width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 50%; background: #fff; color: var(--tinta); font-size: 12px;
    transition: transform .2s;
}
.tarjeta-categoria:hover .flecha-categoria { transform: translateX(3px); }

/* ---------- CATÁLOGO ---------- */
.productos { padding-top: 72px; padding-bottom: 72px; }
.encabezado-productos { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.filtros-productos select {
    min-width: 230px; height: 48px; padding: 0 16px;
    border: 1.5px solid var(--linea); border-radius: 999px; outline: 0;
    background: #fff; font-size: 14px; font-weight: 500;
}
.filtros-productos select:focus { border-color: var(--violeta); }
.mensaje-resultados { margin-bottom: 12px; color: var(--tinta-suave); font-size: 14px; }
.mensaje-resultados:empty { display: none; }

.rejilla-productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tarjeta-producto {
    min-width: 0; overflow: hidden; display: flex; flex-direction: column;
    border-radius: 22px; background: #fff; box-shadow: var(--sombra);
    transition: transform .2s, box-shadow .2s;
}
.tarjeta-producto:hover { transform: translateY(-5px); box-shadow: var(--sombra-fuerte); }
.imagen-producto {
    position: relative; height: 220px; margin: 10px 10px 0; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #f1f5ff, #e8f4fb);
}
.imagen-producto img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.etiqueta-producto {
    position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px;
    background: var(--rosa); color: #fff; font-size: 12px; font-weight: 700;
}
.detalle-producto { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.categoria-producto { color: var(--violeta); font-size: 13px; font-weight: 700; }
.nombre-producto { margin-top: 2px; min-height: 2.6em; color: var(--tinta); font-size: 18px; font-weight: 700; line-height: 1.25; font-family: var(--fuente-titulo); }
.descripcion-producto {
    margin-top: 6px; color: var(--tinta-suave); font-size: 13px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.estado-carga { grid-column: 1 / -1; padding: 40px 16px; text-align: center; color: var(--tinta-suave); }
.precio-producto { margin: 10px 0 14px; color: var(--tinta); font-family: var(--fuente-titulo); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.opciones-producto { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.etiqueta-opcion { color: var(--tinta-suave); font-size: 13px; }
.etiqueta-opcion strong { color: var(--tinta); font-weight: 700; }
.colores-producto { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.opcion-color {
    width: 26px; height: 26px; padding: 0; border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 0 0 1.5px #c4cde4; transition: transform .15s;
}
.opcion-color:hover { transform: scale(1.12); }
.opcion-color[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--violeta); }
.fila-cantidad { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.selector-cantidad {
    width: 78px; height: 38px; padding: 0 8px; outline: 0;
    border: 1.5px solid var(--linea); border-radius: 10px; background: #fff; font-size: 14px;
}
.selector-cantidad:focus { border-color: var(--violeta); }
.boton-agregar {
    width: 100%; min-height: 48px; margin-top: 16px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 14px; background: var(--tinta);
    color: #fff; font-size: 14px; font-weight: 700;
    transition: background .2s, transform .15s;
}
.boton-agregar:hover { background: var(--violeta); }
.boton-agregar:active { transform: scale(.98); }
.sin-resultados {
    grid-column: 1 / -1; padding: 52px 16px; text-align: center; color: var(--tinta-suave);
    border: 2px dashed var(--linea); border-radius: var(--radio); background: #fff;
}
.sin-resultados i { display: block; margin-bottom: 12px; color: var(--violeta); font-size: 32px; }
.sin-resultados strong { color: var(--tinta); font-size: 18px; }

/* ---------- NOSOTROS ---------- */
.nosotros {
    position: relative; overflow: hidden;
    margin-bottom: 72px; padding: 52px 56px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    border-radius: 28px; color: #fff;
    background: linear-gradient(120deg, var(--violeta) 0%, #8a4cf0 45%, var(--rosa) 100%);
    box-shadow: 0 24px 56px rgba(106, 76, 245, .35);
}
.nosotros::before {
    content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px;
    border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.nosotros-contenido { position: relative; }
.nosotros h2 { font-family: var(--fuente-titulo); font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.nosotros p { margin-top: 14px; max-width: 58ch; color: rgba(255, 255, 255, .92); font-size: 17px; line-height: 1.7; }
.nosotros-sello {
    position: relative; width: 120px; height: 120px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 52px;
}

/* ---------- PIE ---------- */
.pie-pagina { background: var(--tinta); color: #c8d2ee; }
.pie-principal {
    width: min(1320px, 92%); margin: auto; padding: 52px 0;
    display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 32px;
}
.pie-pagina .marca-texto { color: #fff; }
.pie-marca p { margin-top: 14px; max-width: 38ch; font-size: 14px; }
.pie-columna { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.pie-columna h3 { margin-bottom: 4px; color: #fff; font-family: var(--fuente-titulo); font-size: 16px; font-weight: 700; }
.pie-columna a:hover { color: var(--sol); }
.pie-columna p i { width: 22px; color: var(--sol); }
.pie-inferior { padding: 18px 4%; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; font-size: 13px; }

/* ---------- CARRITO ---------- */
.fondo-modal { position: fixed; inset: 0; z-index: 100; background: rgba(20, 32, 74, .5); backdrop-filter: blur(3px); }
.panel-carrito {
    position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; width: min(450px, 100%);
    padding: 24px; display: flex; flex-direction: column; gap: 16px;
    background: #fff; box-shadow: -16px 0 48px rgba(20, 32, 74, .25);
    transform: translateX(105%); visibility: hidden;
    transition: transform .25s ease, visibility .25s;
}
.panel-carrito.abierto { transform: translateX(0); visibility: visible; }
.cabecera-carrito, .dialogo-cabecera {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 16px; border-bottom: 1px solid var(--linea);
}
.cabecera-carrito h2, .dialogo-cabecera h2 { font-family: var(--fuente-titulo); font-size: 24px; font-weight: 800; color: var(--tinta); }
.cerrar-carrito {
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--cielo-fondo); font-size: 24px; line-height: 1;
    transition: background .2s;
}
.cerrar-carrito:hover { background: var(--rosa-suave); }
.contenido-carrito { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.item-carrito {
    display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.item-carrito img { width: 72px; height: 76px; padding: 4px; border-radius: 12px; background: #eef3ff; object-fit: contain; }
.item-carrito > span { display: none; }
.info-item-carrito { min-width: 0; }
.info-item-carrito strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
.info-item-carrito small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: 13px; }
.precio-item-carrito { margin-top: 4px; color: var(--tinta); font-size: 15px; font-weight: 700; }
.controles-item { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.controles-item button {
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: var(--violeta-suave); color: var(--violeta); font-size: 16px; font-weight: 700; line-height: 1;
    transition: background .2s;
}
.controles-item button:hover { background: #d9d0ff; }
.controles-item span { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; }
.controles-item .eliminar-item { margin-left: auto; background: transparent; color: var(--tinta-suave); font-size: 14px; }
.controles-item .eliminar-item:hover { color: var(--rosa); background: transparent; }
.carrito-vacio {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; color: var(--tinta-suave);
}
.carrito-vacio > i { color: var(--violeta); font-size: 42px; margin-bottom: 4px; }
.carrito-vacio strong { color: var(--tinta); font-size: 20px; font-family: var(--fuente-titulo); }
.carrito-vacio span { max-width: 28ch; font-size: 14px; line-height: 1.5; }
.boton-secundario {
    min-height: 46px; padding: 0 20px; border: 2px solid var(--tinta); border-radius: 999px;
    background: #fff; font-size: 14px; font-weight: 700; transition: background .2s, color .2s;
}
.boton-secundario:hover { background: var(--tinta); color: #fff; }
.resumen-carrito { padding-top: 16px; border-top: 1px solid var(--linea); }
.linea-total { display: flex; align-items: center; justify-content: space-between; color: var(--tinta-suave); font-size: 15px; }
.linea-total strong { color: var(--tinta); font-size: 26px; font-family: var(--fuente-titulo); font-weight: 800; }
.nota-carrito { margin: 8px 0 14px; color: var(--tinta-suave); font-size: 13px; line-height: 1.5; }
.boton-pagar {
    width: 100%; min-height: 54px; padding: 0 16px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; border-radius: 14px; background: var(--whatsapp); color: #052b14;
    font-size: 16px; font-weight: 700; box-shadow: 0 10px 22px rgba(37, 211, 102, .35);
    transition: background .2s, transform .15s;
}
.boton-pagar i { font-size: 22px; }
.boton-pagar:hover { background: #3fe07f; transform: translateY(-1px); }
.boton-pagar:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.vaciar-carrito { width: 100%; margin-top: 6px; min-height: 40px; border: 0; background: transparent; color: var(--tinta-suave); font-size: 14px; }
.vaciar-carrito:hover:not(:disabled) { color: var(--rosa); }
.vaciar-carrito:disabled { opacity: .4; cursor: default; }

/* ---------- DATOS DEL PEDIDO ---------- */
.dialogo-pedido {
    margin: auto; width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
    padding: 26px; overflow-y: auto;
    border: 0; border-radius: 24px;
    background: #fff; color: var(--tinta);
    box-shadow: 0 30px 80px rgba(20, 32, 74, .4);
}
.dialogo-pedido::backdrop { background: rgba(20, 32, 74, .55); backdrop-filter: blur(3px); }
.dialogo-ayuda { margin: 14px 0 18px; color: var(--tinta-suave); font-size: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 14px; font-weight: 700; }
.campo .opcional { color: var(--tinta-suave); font-weight: 400; }
.campo input, .campo textarea {
    width: 100%; padding: 12px 14px; outline: 0; resize: vertical;
    border: 1.5px solid var(--linea); border-radius: 12px; background: var(--cielo-fondo); font-size: 15px;
    transition: border-color .2s, background .2s;
}
.campo input:focus, .campo textarea:focus { border-color: var(--violeta); background: #fff; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #e5336f; }
.campos-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialogo-total {
    display: flex; align-items: center; justify-content: space-between;
    margin: 4px 0 14px; padding: 14px 0; border-top: 1px solid var(--linea); color: var(--tinta-suave);
}
.dialogo-total strong { color: var(--tinta); font-family: var(--fuente-titulo); font-size: 24px; font-weight: 800; }
.dialogo-error {
    margin-bottom: 14px; padding: 10px 12px; border: 1px solid #f3a3bf; border-radius: 10px;
    background: var(--rosa-suave); color: #a3123f; font-size: 14px;
}
.dialogo-acciones { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.boton-enviar { width: 100%; }

/* ---------- AVISO ---------- */
.toast {
    position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
    max-width: 90%; padding: 13px 20px; border-radius: 14px;
    background: var(--tinta); color: #fff; box-shadow: 0 14px 34px rgba(20, 32, 74, .4);
    font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .rejilla-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .busqueda { width: 200px; }
    .encabezado { gap: 18px; }
}
@media (max-width: 900px) {
    .encabezado { flex-wrap: wrap; padding: 10px 4%; gap: 12px; }
    .menu-movil { display: grid; }
    .acciones-encabezado { margin-left: auto; }
    .navegacion { order: 5; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
    .navegacion.abierto { display: flex; }
    .enlace { padding: 12px 16px; }
    .busqueda { order: 6; width: 100%; flex-basis: 100%; }
    .portada { grid-template-columns: 1fr; min-height: 0; padding: 44px 5% 96px; }
    .portada-imagen { min-height: 320px; }
    .portada-imagen > img { max-height: 300px; }
    .rejilla-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie-principal { grid-template-columns: 1fr 1fr; }
    .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .boton-login span { display: none; }
    .boton-login { width: 46px; padding: 0; justify-content: center; }
    .beneficios { grid-template-columns: 1fr; margin-top: -56px; }
    .globo { font-size: 12px; padding: 8px 12px; }
    .rejilla-productos { gap: 12px; }
    .imagen-producto { height: 150px; }
    .detalle-producto { padding: 12px; }
    .nombre-producto { font-size: 15px; }
    .precio-producto { font-size: 19px; }
    .encabezado-productos { align-items: stretch; flex-direction: column; }
    .filtros-productos select { width: 100%; }
    .nosotros { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
    .nosotros-sello { width: 76px; height: 76px; font-size: 32px; }
    .campos-doble { grid-template-columns: 1fr; gap: 0; }
    .dialogo-acciones { grid-template-columns: 1fr; }
    .dialogo-acciones .boton-secundario { order: 2; }
    .rejilla-categorias { gap: 10px; }
    .tarjeta-categoria { min-height: 96px; gap: 6px; padding-right: 10px; border-radius: 18px; }
    .tarjeta-categoria img { height: 96px; }
    .texto-categoria strong { font-size: 15px; }
    .texto-categoria small { font-size: 12px; }
    .flecha-categoria { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}