/* =========================================================
   TONY'S RAW FOOD — Global
   Dirección visual "Kiosco": editorial, blanco y negro puro,
   grilla estricta, tipografía Archivo pesada y condensada.
   ========================================================= */

:root {
    --primary: #000000;
    --primary-hover: #1a1a1a;
    --secondary: #ffffff;
    --bg-light: #ffffff;
    --text-dark: #000000;
    --text-gray: #6e6e6e;
    --text-light: #9a9a9a;
    --white: #ffffff;
    --black: #000000;
    --border: #e6e6e6;
    --surface: #f4f4f4;
    --surface-soft: #fafafa;
    --radius: 0;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --error: #cc1f1f;   /* único color de toda la web: solo para avisos de error */
    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;

    /* Escala de espaciado */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;

    --container-max: 1180px;

    /* Alturas del header (las usa el JS del mega menú) */
    --topbar-h: 36px;
    --headrow-h: 88px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul { list-style: none; }

img { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

/* El buscador marca el foco engrosando su propia línea, no con un recuadro */
.header-search-input:focus,
.header-search-input:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Etiqueta chica en versalita: se repite en toda la web */
.kicker {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 1024px) { .container { padding: 0 28px; } }
@media (max-width: 768px)  { .container { padding: 0 20px; } }
@media (max-width: 480px)  { .container { padding: 0 16px; } }

/* ---------------------------------------------------------
   AIRE ARRIBA DEL CONTENIDO

   El header es sticky, así que sin esto el título de cada
   página nace pegado a la barra. Una sola regla para todas:
   lo que va a sangre (el carrusel del inicio) lo descuenta
   con un margen negativo del mismo valor.
   --------------------------------------------------------- */
:root { --aire-arriba: 46px; }

main.container { padding-top: var(--aire-arriba); }

@media (max-width: 768px) { :root { --aire-arriba: 32px; } }
@media (max-width: 480px) { :root { --aire-arriba: 26px; } }


/* =========================================================
   HEADER
   ========================================================= */
header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* --- Franja negra de avisos --- */
.topbar {
    background: var(--black);
    color: var(--white);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    white-space: nowrap;
}

.topbar-sep { opacity: 0.45; }

.topbar a:hover { text-decoration: underline; }

/* --- Fila principal --- */
.header-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
    height: var(--headrow-h);
}

.logo {
    color: var(--black);
    display: flex;
    align-items: center;
}

.logo:hover { opacity: 0.65; }

.logo img {
    height: 28px;
    width: auto;
    display: block;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-shrink: 0;
}

/* =========================================================
   MEGA MENÚ "MASCOTAS"
   ========================================================= */
.mascotas-menu { position: static; }

.mascotas-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-dark);
    cursor: pointer;
    font-family: inherit;
    border-bottom: 1.5px solid transparent;
}

.mascotas-trigger:hover,
.mascotas-menu.open .mascotas-trigger { border-bottom-color: var(--black); }

.mascotas-trigger .icon-chevron { transition: transform 0.2s ease; }

.mascotas-menu.open .mascotas-trigger .icon-chevron { transform: rotate(180deg); }

.mascotas-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--container-max), calc(100vw - 40px));
    background: var(--white);
    border: 1px solid var(--black);
    border-top: none;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.28);
    z-index: 200;
}

.mascotas-menu.open .mascotas-panel { display: flex; }

.mascotas-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 0;
    display: flex;
    flex-direction: column;
}

.mascotas-sidebar-label {
    padding: 0 24px 16px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
}

.mascota-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
}

.mascota-avatar {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-gray);
    transition: var(--transition);
}

.mascota-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mascota-item:hover { background: #ececec; }

.mascota-item.active {
    background: var(--white);
    border-left-color: var(--black);
}

.mascota-item.active .mascota-avatar {
    border-color: var(--black);
    color: var(--black);
}

.mascota-item--all {
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    justify-content: space-between;
    color: var(--text-gray);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mascota-item--all:hover { color: var(--text-dark); }

.mascotas-rubros {
    flex: 1;
    padding: 28px 36px 34px;
}

.mascotas-rubros-label {
    display: block;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 20px;
}

.mascota-rubros-cols { display: none; }
.mascota-rubros-cols.active { display: block; }

/* Columnas que se balancean solas: con 5 rubros no queda ninguno colgando
   en una fila aparte, y el panel mide lo que mide el contenido. */
.mascota-rubros-grid {
    columns: 3;
    column-gap: 34px;
}

.rubro-col {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    min-width: 0;
    margin-bottom: 20px;
}

/* Sin línea debajo: la mayoría de los rubros no tienen subcategorías y
   el subrayado hacía parecer que faltaba algo. */
.rubro-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.rubro-title:hover {
    color: var(--text-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rubro-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 9px;
}

.rubro-col ul a {
    font-size: 0.8rem;
    color: var(--text-gray);
}

.rubro-col ul a:hover {
    color: var(--text-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mascota-empty {
    font-size: 0.9rem;
    color: var(--text-gray);
}

/* =========================================================
   BUSCADOR — línea, no píldora
   ========================================================= */
.header-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    height: 36px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--black);
    border-radius: 0;
    padding: 0;
    transition: var(--transition);
}

.header-search:focus-within {
    border-bottom-width: 2px;
    padding-bottom: 0;
}

.header-search:focus-within .header-search-input::placeholder { color: #c4c4c4; }

.header-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.header-search-input::placeholder {
    color: var(--text-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.header-search-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--text-dark);
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.header-search-btn:hover { color: var(--text-gray); }

/* =========================================================
   CARRITO EN EL HEADER
   ========================================================= */
.nav-links {
    display: flex;
    gap: 26px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.nav-links a {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-dark);
    position: relative;
}

.nav-links a:hover { color: var(--text-gray); }

/* El carrito del header es un botón: abre el cajón lateral, no navega */
.nav-links button.cart-icon {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: var(--transition);
}

.nav-links button.cart-icon:hover { color: var(--text-gray); }

.cart-icon { gap: 9px; }

.cart-badge {
    background: var(--black);
    color: var(--white);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.btn-primary {
    background: var(--black);
    color: var(--white);
    border: 1.5px solid var(--black);
}

.btn-primary:hover {
    background: var(--white);
    color: var(--black);
}

.btn-outline {
    border: 1.5px solid var(--black);
    background: var(--white);
    color: var(--black);
}

.btn-outline:hover {
    background: var(--black);
    color: var(--white);
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 0;
    background: var(--black);
    color: var(--white);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1.5px solid var(--black);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-whatsapp:hover {
    background: var(--white);
    color: var(--black);
}

.btn-block { width: 100%; }

/* =========================================================
   FORMULARIOS
   ========================================================= */
input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    font-size: 0.92rem;
    font-family: inherit;
    transition: var(--transition);
    background: var(--white);
}

input:focus, select:focus, textarea:focus { border-color: var(--black); }

.header-search-input:focus,
.header-search-input:focus-visible { border: none; outline: none; }

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dark);
}

/* =========================================================
   RESPONSIVO DEL HEADER
   ========================================================= */
@media (max-width: 1024px) {
    .header-search { max-width: 300px; }
    .header-left { gap: 18px; }
}

@media (max-width: 768px) {
    :root {
        --topbar-h: 32px;
        --headrow-h: auto;
    }

    .header-content {
        display: flex;
        grid-template-columns: none;
    }

    .topbar-inner { font-size: 0.58rem; letter-spacing: 0.13em; gap: 10px; }

    .header-content {
        flex-wrap: wrap;
        height: auto;
        /* Solo vertical: el horizontal lo pone .container */
        padding-top: 14px;
        padding-bottom: 12px;
        gap: 14px;
    }

    .logo img { height: 24px; }

    .header-left { gap: 16px; }

    .mascotas-trigger { font-size: 0.66rem; gap: 7px; }
    .mascotas-trigger svg:first-child { width: 15px; height: 15px; }

    /* El item flex es el <nav>, no la <ul>: es ahí donde va el empuje a la derecha */
    .header-content > nav { margin-left: auto; }
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 0.66rem; }

    .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin: 0;
    }

    .mascotas-panel {
        position: fixed;
        top: auto;
        left: 12px;
        right: 12px;
        width: auto;
        transform: none;
        max-height: 74vh;
        overflow-y: auto;
        flex-direction: column;
        border-top: 1px solid var(--black);
    }

    .mascotas-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 14px 0;
    }

    .mascotas-sidebar-label { display: none; }

    .mascota-item {
        /* width:auto, si no cada mascota ocupa el ancho entero y las demás
           quedan fuera de la pantalla */
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: 0.85rem;
        padding: 8px 14px;
        gap: 10px;
    }

    .mascota-avatar { width: 40px; height: 40px; }

    .mascota-item.active {
        border-left: none;
        border-bottom-color: var(--black);
    }

    .mascota-item--all {
        margin-top: 0;
        padding: 8px 14px;
        border-top: none;
        border-left: 1px solid var(--border);
    }

    .mascotas-rubros { padding: 22px 20px; }
    .mascota-rubros-grid { columns: 2; column-gap: 20px; }
    .rubro-title { font-size: 0.72rem; letter-spacing: 0.04em; }
    .rubro-col ul { gap: 5px; margin-top: 7px; }
    .rubro-col ul a { font-size: 0.76rem; }
    .rubro-col { margin-bottom: 16px; }

    .btn, .btn-whatsapp { padding: 14px 24px; font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .logo img { height: 20px; }
    .topbar-inner { letter-spacing: 0.1em; }
}

/* Pantallas angostas: apretamos un poco para que logo, Mascotas y
   Tu Pedido entren en una sola línea */
@media (max-width: 420px) {
    .header-content { gap: 10px; }
    .header-left { gap: 11px; }
    .logo img { height: 19px; }
    .mascotas-trigger { font-size: 0.6rem; letter-spacing: 0.1em; gap: 6px; }
    .mascotas-trigger svg:first-child { width: 14px; height: 14px; }
    .nav-links a { font-size: 0.6rem; letter-spacing: 0.09em; }
    .cart-icon { gap: 7px; }
    .cart-badge { width: 16px; height: 16px; font-size: 0.55rem; }
}

/* La franja de avisos se acorta en pantallas chicas para que no se corte */
@media (max-width: 620px) {
    .topbar-hide-sm { display: none; }
}

/* Las fotos redondas del menú van en escala de grises para no romper el blanco y negro.
   Recuperan el color al pasar el mouse o cuando la mascota está seleccionada. */
.mascota-avatar img {
    filter: grayscale(1) contrast(1.05);
    transition: filter 0.25s ease;
}

.mascota-item:hover .mascota-avatar img,
.mascota-item.active .mascota-avatar img {
    filter: grayscale(0);
}

/* =========================================================
   MIGAS DE PAN (listado y ficha de producto)
   ========================================================= */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 14px;
}

.breadcrumb a { color: var(--text-gray); }
.breadcrumb a:hover { color: var(--text-dark); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-sep { color: var(--text-light); }
.breadcrumb-current { color: var(--text-dark); font-weight: 700; }

/* Campo libre del producto: el cliente escribe lo que el local le pregunta
   (el color, por ejemplo) y eso viaja con el pedido. */
/* La pregunta es una frase, no una etiqueta corta: si va en la columna
   angosta de las variantes se parte en tres líneas. Acá se apila. */
.options-group:has(.nota-input) { display: block; }
.options-group:has(.nota-input) > label {
    display: block;
    width: auto;
    margin-bottom: 8px;
}
.nota-input {
    width: 100%;
    border: 1px solid var(--border, #ddd);
    background: #fff;
    font-family: inherit;
    font-size: 0.92rem;
}
.options-group.is-error .nota-input { border-color: #c22d2d; }

/* ── Aviso corto del carrito ────────────────────────────────────────────
   Aparece cuando el servidor corrige algo (se acabó el stock, el cupón ya
   no vale). Va fijo arriba para que se vea aunque la página esté scrolleada. */
#aviso-carrito {
    position: fixed;
    top: 0; left: 50%;
    transform: translate(-50%, -120%);
    z-index: 4000;
    max-width: min(560px, calc(100vw - 24px));
    margin-top: 12px;
    padding: 13px 18px;
    background: #000;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}
#aviso-carrito.visible { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #aviso-carrito { transition: none; } }

/* Quitar del carrito: era una cruz de 10px imposible de acertar con el dedo. */
.drawer-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: #9a9a9a;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}
.drawer-remove:hover,
.drawer-remove:focus-visible { color: #000; }

/* Estado de foco visible en toda la tienda: sin esto no se puede navegar
   con el teclado y falla cualquier revisión de accesibilidad. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Texto que sólo leen Google y los lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Tienda cerrada ──────────────────────────────────────────────────────
   Reemplaza al viejo "despublicar todo": el catálogo se sigue viendo y se
   puede consultar por WhatsApp, pero no entran pedidos. */
.tienda-cerrada {
    background: #000;
    color: #fff;
    padding: 13px 0;
    font-size: 0.86rem;
    line-height: 1.55;
}
.tienda-cerrada .container {
    display: flex;
    align-items: baseline;
    gap: 6px 14px;
    flex-wrap: wrap;
}
.tienda-cerrada b {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tienda-cerrada span { color: rgba(255, 255, 255, 0.82); }
.tienda-cerrada a {
    margin-left: auto;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}


/* Zona de toque más grande en celular para la lupa, "Tu pedido" y la × de
   quitar del carrito. No cambia cómo se ven ni mueve nada: el área extra
   es invisible y se extiende hacia afuera del botón. */
@media (max-width: 900px) {
    .header-search-btn,
    .nav-links button.cart-icon,
    .delete-btn { position: relative; }
    .header-search-btn::after,
    .nav-links button.cart-icon::after,
    .delete-btn::after {
        content: "";
        position: absolute;
        top: -9px; bottom: -9px; left: -9px; right: -9px;
    }
}


/* Franja negra de avisos en celular: el texto (envío, retiro y WhatsApp)
   es más ancho que la pantalla y, como va centrado y sin cortes de línea,
   se recortaba de los dos lados. Ahora baja a una segunda línea si hace
   falta, y la franja crece lo que necesite. */
@media (max-width: 620px) {
    .topbar { height: auto; min-height: var(--topbar-h); padding: 7px 14px; }
    .topbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        white-space: normal;
        text-align: center;
        row-gap: 3px;
        column-gap: 12px;
        line-height: 1.4;
    }
    .topbar-sep { display: none; }
}

/* En celular el botón verde de WhatsApp ya está siempre a mano: se saca el
   link de la franja para que entre en dos líneas y no ocupe media pantalla. */
@media (max-width: 480px) {
    .topbar a { display: none; }
}