/* =========================================
   PIAZZA ITALIA · ESTILOS DE LA TIENDA
   (el panel de administración usa style.css)
========================================= */

:root {
    --espresso: #1F120B;        /* fondos oscuros */
    --marron-oscuro: #2B1810;
    --marron: #7A3B1E;          /* color de marca */
    --marron-hover: #5E2C15;
    --dorado: #C9A15B;          /* detalles */
    --crema: #F7F3EC;
    --crema-oscura: #EFE7DA;
    --blanco: #FFFFFF;
    --texto: #2A1D16;
    --texto-suave: #6F6259;
    --linea: #E6DCCD;
    --verde: #2F6B3A;
    --verde-fondo: #E8F2E6;
    --rojo: #A3321F;
    --rojo-fondo: #F9E4E0;
    --ambar: #8A5A0F;
    --ambar-fondo: #FBEFD6;

    --titulos: "Playfair Display", Georgia, serif;
    --texto-fuente: "Inter", "Segoe UI", Arial, sans-serif;
    --radio: 14px;
    --sombra: 0 1px 2px rgba(43, 24, 16, .06), 0 8px 24px rgba(43, 24, 16, .08);
    --sombra-alta: 0 2px 4px rgba(43, 24, 16, .08), 0 18px 40px rgba(43, 24, 16, .16);
    --ancho: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--texto-fuente);
    font-size: 16px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--crema);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--marron); }

h1, h2, h3 {
    font-family: var(--titulos);
    color: var(--marron-oscuro);
    line-height: 1.2;
    margin: 0;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- Botones ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font: 600 15px/1.2 var(--texto-fuente);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.boton-principal { background: var(--marron); color: var(--blanco); }
.boton-principal:hover { background: var(--marron-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(122, 59, 30, .3); }

.boton-claro { background: var(--crema); color: var(--marron-oscuro); }
.boton-claro:hover { background: var(--blanco); }

.boton-contorno { background: transparent; color: var(--marron); border-color: var(--marron); }
.boton-contorno:hover { background: var(--marron); color: var(--blanco); }

.boton-deshabilitado { background: var(--crema-oscura); color: var(--texto-suave); cursor: not-allowed; }

.boton-grande { padding: 14px 28px; font-size: 16px; }
.boton-bloque { width: 100%; }

.boton-icono {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: transparent; color: var(--texto-suave);
    cursor: pointer;
}
.boton-icono:hover { background: var(--rojo-fondo); color: var(--rojo); }
.boton-icono svg { width: 18px; height: 18px; }

.enlace-flecha { font-weight: 600; text-decoration: none; color: var(--marron); }
.enlace-flecha:hover { text-decoration: underline; }


/* ---------- Franja superior y cabecera ---------- */

.franja-anuncio {
    background: var(--espresso);
    color: var(--dorado);
    text-align: center;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 16px;
}

.franja-exclusivo {
    display: block;
    margin-bottom: 4px;
    color: var(--blanco);
    font-weight: 700;
    letter-spacing: .12em;
}

.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(43, 24, 16, .97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(201, 161, 91, .25);
}

.cabecera-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }

.marca-nombre {
    font-family: var(--titulos);
    font-size: 32px;
    font-weight: 700;
    color: var(--blanco);
    letter-spacing: .01em;
}

.marca-sub {
    font-size: 13px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--dorado);
}

.marca-grupo {
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.menu { display: flex; gap: 6px; margin: 0 auto; }

.menu a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color .2s, background .2s;
}

.menu a:hover { color: var(--blanco); background: rgba(255, 255, 255, .08); }
.menu a.activo { color: var(--blanco); background: rgba(201, 161, 91, .18); }

.boton-carrito {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--marron);
    color: var(--blanco);
    text-decoration: none;
    font-weight: 600;
    transition: background .2s;
}

.boton-carrito:hover, .boton-carrito.activo { background: var(--marron-hover); }
.boton-carrito svg { width: 20px; height: 20px; }

.contador {
    min-width: 22px; height: 22px;
    padding: 0 6px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--dorado);
    color: var(--espresso);
    font-size: 12px;
    font-weight: 700;
}

.contador.vacio { background: rgba(255, 255, 255, .2); color: var(--blanco); }


/* ---------- Contenido y secciones ---------- */

.contenido { min-height: 60vh; }

.seccion {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 56px 24px;
}

.etiqueta-seccion {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--marron);
    margin-bottom: 10px;
}

.encabezado-pagina { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.encabezado-pagina h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 12px; }
.encabezado-pagina p { color: var(--texto-suave); margin: 0; font-size: 17px; }
.encabezado-izquierda { text-align: left; max-width: none; margin-bottom: 28px; }

.seccion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.seccion-cabecera h2 { font-size: clamp(28px, 4vw, 36px); }

.vacio-texto { text-align: center; color: var(--texto-suave); }

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}


/* ---------- Portada (inicio) ---------- */

.portada {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(31, 18, 11, .97) 0%, rgba(31, 18, 11, .92) 42%, rgba(31, 18, 11, .35) 72%, rgba(31, 18, 11, .1) 100%),
        url("img/carne.png") right center / cover no-repeat;
    color: var(--blanco);
}

.portada-texto {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 72px 24px;
}

.portada-texto > * { max-width: 560px; }
.portada .etiqueta-seccion { color: var(--dorado); }

.portada h1 {
    color: var(--blanco);
    font-size: clamp(36px, 6vw, 58px);
    margin-bottom: 20px;
}

.portada p { font-size: 18px; color: rgba(255, 255, 255, .8); margin: 0 0 32px; }

.portada-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

.beneficios {
    max-width: var(--ancho);
    margin: -44px auto 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra-alta);
}

.beneficio {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 24px;
}

.beneficio + .beneficio { border-left: 1px solid var(--linea); }

.beneficio svg {
    width: 40px; height: 40px;
    flex-shrink: 0;
    padding: 9px;
    border-radius: 50%;
    background: var(--crema);
    color: var(--marron);
}

.beneficio strong { display: block; font-size: 15px; color: var(--marron-oscuro); }
.beneficio span { font-size: 13px; color: var(--texto-suave); line-height: 1.4; }

.bloque-historia {
    background: var(--marron-oscuro);
    color: rgba(255, 255, 255, .8);
    text-align: center;
}

.bloque-historia > div { max-width: 720px; margin: 0 auto; padding: 72px 24px; }
.bloque-historia .etiqueta-seccion { color: var(--dorado); }
.bloque-historia h2 { color: var(--blanco); font-size: clamp(28px, 4vw, 38px); margin-bottom: 16px; }
.bloque-historia p { font-size: 17px; margin: 0 0 28px; }
.bloque-historia .boton-contorno { color: var(--dorado); border-color: var(--dorado); }
.bloque-historia .boton-contorno:hover { background: var(--dorado); color: var(--espresso); }


/* ---------- Tarjetas de producto ---------- */

.rejilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.producto {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    scroll-margin-top: 110px;
}

.producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.producto.en-carrito { border-color: var(--marron); box-shadow: 0 0 0 1px var(--marron), var(--sombra); }

.producto-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--crema-oscura); }

.producto-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.producto:hover .producto-foto img { transform: scale(1.04); }
.producto.agotado .producto-foto img { filter: grayscale(.7); opacity: .7; }

.sello {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.sello-agotado { background: var(--espresso); color: var(--blanco); }
.sello-pocas { background: var(--ambar-fondo); color: var(--ambar); }
.sello-carrito { left: auto; right: 12px; background: var(--verde); color: var(--blanco); }

.producto-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }

.producto-categoria {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.producto-nombre { font-size: 22px; margin: 4px 0 8px; }

.producto-desc {
    font-size: 14px;
    color: var(--texto-suave);
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.producto-pie { margin-top: auto; }

.producto-precio {
    display: block;
    font-family: var(--titulos);
    font-size: 26px;
    font-weight: 700;
    color: var(--marron);
    margin-bottom: 14px;
}

.producto-comprar { display: flex; gap: 10px; }
.producto-comprar .boton { flex: 1; }
.producto-pie > .boton { width: 100%; }

/* Selector de cantidad */
.cantidad {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--linea);
    border-radius: 999px;
    background: var(--blanco);
    overflow: hidden;
}

.cantidad button {
    width: 36px; height: 42px;
    border: none;
    background: transparent;
    color: var(--marron-oscuro);
    font-size: 18px;
    cursor: pointer;
}

.cantidad button:hover { background: var(--crema); }

.cantidad input,
.cantidad span {
    width: 36px;
    text-align: center;
    border: none;
    font: 600 15px var(--texto-fuente);
    color: var(--texto);
    background: transparent;
    -moz-appearance: textfield;
}

.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad input:focus { outline: none; }

.cantidad-chica button { width: 32px; height: 34px; }


/* ---------- Carrito ---------- */

.carrito {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.carrito-principal { display: flex; flex-direction: column; gap: 24px; }

.carrito-lista { list-style: none; margin: 0; padding: 0; }

.carrito-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto 110px 36px;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.carrito-item + .carrito-item { border-top: 1px solid var(--linea); }
.carrito-item form { margin: 0; }

.carrito-item img {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: 10px;
}

.carrito-item-info strong { display: block; font-size: 16px; color: var(--marron-oscuro); }
.carrito-item-info span { font-size: 14px; color: var(--texto-suave); }
.carrito-item-total { text-align: right; font-size: 16px; }

.formulario { padding: 28px; }
.formulario h2 { font-size: 22px; }
.formulario-ayuda { color: var(--texto-suave); font-size: 14px; margin: 4px 0 20px; }

.formulario-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

.formulario label { display: flex; flex-direction: column; gap: 6px; }
.formulario label span { font-size: 13px; font-weight: 600; color: var(--texto-suave); }

.formulario input,
.formulario textarea {
    font: 15px var(--texto-fuente);
    padding: 12px 14px;
    border: 1.5px solid var(--linea);
    border-radius: 10px;
    background: #FFFDF9;
    color: var(--texto);
    transition: border-color .2s, box-shadow .2s;
}

.formulario input:focus,
.formulario textarea:focus {
    outline: none;
    border-color: var(--marron);
    box-shadow: 0 0 0 3px rgba(122, 59, 30, .14);
}

.ancho-completo { grid-column: 1 / -1; }

.resumen { position: sticky; top: 110px; padding: 26px; }
.resumen h2 { font-size: 22px; margin-bottom: 18px; }
.resumen dl { margin: 0 0 22px; }

.resumen dl div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--texto-suave);
}

.resumen dd { margin: 0; color: var(--texto); font-weight: 600; }

.resumen .resumen-total {
    border-top: 1px solid var(--linea);
    margin-top: 8px;
    padding-top: 16px;
    color: var(--marron-oscuro);
    font-weight: 700;
    font-size: 18px;
}

.resumen .resumen-total dd { font-family: var(--titulos); font-size: 26px; color: var(--marron); }

.resumen-vaciar {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 14px;
    color: var(--texto-suave);
}

.carrito-vacio {
    max-width: 520px;
    margin: 0 auto;
    padding: 48px 32px;
    text-align: center;
}

.carrito-vacio svg {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    padding: 14px;
    border-radius: 50%;
    background: var(--crema);
    color: var(--marron);
}

.carrito-vacio h2 { font-size: 26px; margin-bottom: 8px; }
.carrito-vacio p { color: var(--texto-suave); margin: 0 0 24px; }
.carrito-vacio .portada-acciones { justify-content: center; }


/* ---------- Contacto ---------- */

.rejilla-contacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.tarjeta-contacto {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 32px 24px;
    text-align: center;
}

.tarjeta-contacto svg {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    padding: 14px;
    border-radius: 50%;
    background: var(--crema);
    color: var(--marron);
}

.tarjeta-contacto h3 { font-size: 20px; margin-bottom: 6px; }
.tarjeta-contacto p { margin: 0; color: var(--texto-suave); word-break: break-word; }

.llamado-accion {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 36px 40px;
    border-radius: var(--radio);
    background: var(--marron-oscuro);
    color: rgba(255, 255, 255, .8);
}

.llamado-accion h2 { color: var(--blanco); font-size: 26px; margin-bottom: 6px; }
.llamado-accion p { margin: 0; }


/* ---------- Pie de página ---------- */

.pie { background: var(--espresso); color: rgba(255, 255, 255, .65); font-size: 14px; }

.pie-interior {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.pie-marca .marca-nombre { font-size: 24px; }
.pie-marca p { max-width: 360px; margin: 10px 0 0; }

.pie h4 {
    margin: 0 0 12px;
    color: var(--dorado);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pie a, .pie span { display: block; color: rgba(255, 255, 255, .75); text-decoration: none; margin-bottom: 8px; }
.pie a:hover { color: var(--blanco); }

.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    padding: 16px 24px;
    font-size: 13px;
}

.pie-grupo {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--dorado);
}


/* ---------- Avisos flotantes ---------- */

.avisos {
    position: fixed;
    top: 96px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
}

.aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid transparent;
    box-shadow: var(--sombra-alta);
}

.aviso span { flex: 1; }
.aviso a { color: inherit; font-weight: 700; white-space: nowrap; }

.aviso button {
    background: none; border: none;
    color: inherit;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    opacity: .6;
}

.aviso button:hover { opacity: 1; }

.aviso-carrito { background: var(--marron-oscuro); color: var(--blanco); border-color: var(--marron); }
.aviso-ok      { background: var(--verde-fondo); color: var(--verde); border-color: #CFE3C6; }
.aviso-aviso   { background: var(--ambar-fondo); color: var(--ambar); border-color: #EFDDB4; }
.aviso-error   { background: var(--rojo-fondo); color: var(--rojo); border-color: #EFC9C1; }

/* Los avisos de éxito se ocultan solos; los de error se quedan hasta cerrarlos */
.aviso-carrito, .aviso-ok { animation: aviso-desvanecer 6s ease forwards; }

@keyframes aviso-desvanecer {
    0%   { opacity: 0; transform: translateY(-8px); }
    5%   { opacity: 1; transform: none; }
    85%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}


/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .beneficios { margin: -36px 16px 0; }
    .carrito { grid-template-columns: 1fr; }
    .resumen { position: static; }
    .rejilla-contacto { grid-template-columns: 1fr; }
    .pie-interior { grid-template-columns: 1fr 1fr; }
    .pie-marca { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .cabecera-interior { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
    .marca-nombre { font-size: 24px; }
    .marca-sub { font-size: 11px; }
    .boton-carrito { margin-left: auto; }
    .boton-carrito-texto { display: none; }
    .menu {
        order: 3;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .menu a { white-space: nowrap; font-size: 14px; padding: 6px 12px; }

    .seccion { padding: 40px 16px; }
    .portada { min-height: 440px; background-position: 70% center; }
    .portada-texto { padding: 56px 16px 80px; }
    .beneficios { grid-template-columns: 1fr; }
    .beneficio + .beneficio { border-left: none; border-top: 1px solid var(--linea); }

    .carrito-item {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        grid-template-areas: "foto info quitar" "foto cant total";
        gap: 8px 12px;
        padding: 14px 16px;
    }
    .carrito-item img { grid-area: foto; width: 60px; height: 60px; }
    .carrito-item-info { grid-area: info; }
    .carrito-item .cantidad { grid-area: cant; justify-self: start; }
    .carrito-item-total { grid-area: total; }
    .carrito-item > form:last-child { grid-area: quitar; }
    .formulario { padding: 20px; }
    .formulario-rejilla { grid-template-columns: 1fr; }
    .llamado-accion { padding: 28px 24px; }
    .pie-interior { grid-template-columns: 1fr; gap: 24px; }
    .avisos { top: auto; bottom: 16px; right: 16px; }
}


/* ---------- Pedido confirmado y calificación ---------- */

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

.confirmacion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}

.confirmacion-pedido { padding: 36px 32px; text-align: center; }

.confirmacion-icono {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--verde-fondo);
    color: var(--verde);
}

.confirmacion-icono svg { width: 30px; height: 30px; stroke-width: 2.4; }
.confirmacion-pedido h1 { font-size: 30px; margin-bottom: 12px; }
.confirmacion-pedido > p { color: var(--texto-suave); margin: 0 0 24px; }

.confirmacion-lista {
    list-style: none;
    margin: 0;
    padding: 16px 20px;
    border-radius: 12px;
    background: var(--crema);
    text-align: left;
}

.confirmacion-lista li { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; }

.confirmacion-total {
    margin-top: 6px;
    padding-top: 12px !important;
    border-top: 1px solid var(--linea);
    font-weight: 600;
}

.confirmacion-total strong { font-family: var(--titulos); font-size: 22px; color: var(--marron); }

.calificacion { padding: 36px 32px; text-align: center; }
.calificacion h2 { font-size: 28px; margin-bottom: 6px; }
.calificacion > form > p { color: var(--texto-suave); margin: 0; }

.selector-estrellas {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 4px;
    margin: 18px 0 4px;
    padding: 0;
    border: none;
}

.selector-estrellas input { position: absolute; opacity: 0; pointer-events: none; }

.selector-estrellas label {
    font-size: 44px;
    line-height: 1;
    color: var(--linea);
    cursor: pointer;
    transition: color .15s, transform .15s;
}

/* Las estrellas van en orden 5..1 en el HTML y se muestran al revés: al elegir una se pintan ella y las anteriores */
.selector-estrellas input:checked ~ label { color: var(--dorado); }
.selector-estrellas:hover label { color: var(--linea); }
.selector-estrellas label:hover,
.selector-estrellas label:hover ~ label { color: var(--dorado); transform: scale(1.08); }
.selector-estrellas input:focus-visible + label { outline: 2px solid var(--marron); outline-offset: 2px; border-radius: 6px; }

.estrellas-texto { min-height: 24px; margin: 0 0 20px; font-weight: 600; color: var(--marron); }

.calificacion-comentario { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 20px; }
.calificacion-comentario span { font-size: 13px; font-weight: 600; color: var(--texto-suave); }

.calificacion-comentario textarea {
    font: 15px var(--texto-fuente);
    padding: 12px 14px;
    border: 1.5px solid var(--linea);
    border-radius: 10px;
    background: #FFFDF9;
    resize: vertical;
}

.calificacion-comentario textarea:focus { outline: none; border-color: var(--marron); box-shadow: 0 0 0 3px rgba(122, 59, 30, .14); }

.calificacion-omitir { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--texto-suave); }

.calificacion-gracias p { color: var(--texto-suave); margin: 0 0 24px; }

.estrellas-fijas { display: inline-flex; gap: 2px; font-size: 36px; line-height: 1; color: var(--linea); margin-bottom: 12px; }
.estrellas-fijas .llena { color: var(--dorado); }
.estrellas-chicas { font-size: 18px; margin-bottom: 0; }

/* Opiniones en el inicio */
.rejilla-opiniones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.opinion {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.opinion blockquote {
    margin: 0;
    flex: 1;
    font-family: var(--titulos);
    font-size: 18px;
    line-height: 1.5;
    color: var(--marron-oscuro);
}

.opinion figcaption { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--texto-suave); }

.opinion-avatar {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--crema);
    color: var(--marron);
    font-weight: 700;
}

@media (max-width: 820px) {
    .confirmacion { grid-template-columns: 1fr; }
    .confirmacion-pedido, .calificacion { padding: 28px 20px; }
    .selector-estrellas label { font-size: 40px; }
}


/* ---------- Vitrina de combos en el inicio (solo foto y nombre) ---------- */

.vitrina {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}

.vitrina:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

.vitrina-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--crema-oscura); }

.vitrina-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.vitrina:hover .vitrina-foto img { transform: scale(1.04); }

.vitrina h3 {
    padding: 18px 22px 20px;
    font-size: 22px;
    text-align: center;
}