@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');

:root{
   --color-principal:#590C72;
   --color-secundario:#D39AE8;
   --color-fondo:#d7afe5;
   --color-texto:#D39AE8;
   --color-fondo-text: #e7daeb;
   --color-texto-hueso: #EFEFB9;
}

body{
   margin:0;
   padding:0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 64px;
    padding: 0 1rem;
    box-sizing: border-box;
    background-color: var(--color-fondo);
    z-index: 900;
}

/* Espaciador global: empuja el contenido debajo del header fijo */
body {
    padding-top: 64px;
}

header .marca a {
    width: 90px;
    display: inline-flex;
    align-items: center;
}

p {
    font-family: Montserrat, sans-serif;
    font-size: 1.5rem;
}
h1 {
    font-family: Anton, sans-serif;
    font-size:3rem;
    color: #310240;
}

h2 {
    font-family: Montserrat, sans-serif;
    font-size:2.5rem;
    color: #310240;
}

h3 {
    font-family: Montserrat, sans-serif;
    font-size:1rem;
    color:var(--color-texto-hueso);
    font-weight:550;
    text-align: center;
}

.textoh3 {
    font-family: Montserrat, sans-serif;
    font-size:1.5rem;
    color:var(--color-principal);
    font-weight:550;
}

nav ul{
   display:flex;
   list-style:none;
   gap:25px;
   padding: 2px;
}

nav a{
   text-decoration:none;
   font-weight: bold;
   color:black;
   font-family: 'Quicksand', sans-serif;
}

button a{
    text-decoration: none;
    color: white;
}

a {
    text-decoration: none;
    color: #310240;
}

nav a:hover{
   color:brown;
}

.logoletra {
    width: 80px;
    max-width: 120px;
    height: auto;
}

.btn-tienda{
  background:#782494;
  color:white;
  padding:0.9rem 1.5rem;
  border: 1px solid var(--color-principal);
  border-radius:0.55rem;
  cursor:pointer;
}

.btn-tienda:hover {
    background-color: var(--color-principal);
}

/* Contenedor de marca: logo + botón de idioma juntos (encuadre del logo) */
.marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botón de idioma (ES / EN) — compacto, dentro del encuadre del logo */
.btn-idioma {
    background: transparent;
    color: var(--color-principal);
    border: 1.5px solid var(--color-principal);
    border-radius: 999px;
    width: 38px;
    height: 30px;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.btn-idioma:hover {
    background: var(--color-principal);
    color: #fff;
}

/* Botón hamburguesa (menú móvil) — oculto en escritorio */
.btn-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-menu span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-principal);
    transition: transform 0.25s, opacity 0.25s;
}

/* Animación a "X" cuando el menú está abierto */
.btn-menu.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.btn-menu.activo span:nth-child(2) { opacity: 0; }
.btn-menu.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.contenedorimg {
    display: flex;
    justify-content: center;
    max-width: 40%;
}

.img50 {
    max-width: 80%;
    height: auto;
    padding: 0;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(69, 9, 90, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.img50:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(69, 9, 90, 0.28);
}

.tiendaimg {
    width: 18rem;
}

.tiendaimg2 {
    width: 30%;
}

.tiendaimg3 {
    width: 100%;
}

.compra {
    width: 70%
}

.contenedor2c {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-fondo-text);
    gap: 5%;
    padding: 2.5rem 10px;
}

.contenedor3c {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-principal);
    gap: 5%;
    padding: 2.5rem 10px;
}

.tiendah1 {
    text-align: center;
    background-color: var(--color-fondo-text);
    padding: 2.5rem 10px;
    margin: 0;
}

.tiendaletra {
    font-family: Anton, sans-serif;
    color: #EFEFB9;
    font-size: 2rem;
}

.tiendaletra2 {
    font-family: Montserrat, sans-serif;
    color: #EFEFB9;
    font-size: 1rem;
}

.tiendaletra3 {
    font-family: Quicksand, sans-serif;
    color: #EFEFB9;
    font-size: 1rem;
    margin: 0;
}

.contenedor2c2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    gap: 5%;
    padding: 4.5rem 10px 10px;
}

.contenedor2ctext {
    padding: 3%;
    max-width: 55%;
    min-width: 50%;
}

.botones {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
    gap: 10px; /* espacio entre botones */
    width: 100%;
}

.resumen {
    text-align: center;
    margin-top: 10px;
}

.fila {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
}

.label {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 5px;
    color: var(--color-texto-hueso);
}

/* Valores pequeños (envío y producto) */
.valor.pequeno {
    font-size: 18px;
}

/* Total destacado */
.total {
    margin-top: 7px;
    margin-bottom: 5px;
    border-radius: 0.3rem;
    border: 1px solid #EFEFB9;
}

.label-total {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--color-texto-hueso);
}

.valor.grande {
    font-size: 28px;
    font-weight: bold;
}

/* valores normales (envío, producto) */
.valor {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-texto-hueso);
    margin-top: 0.5rem;
    text-align: center;
}

/* total más grande */
.valor-total {
    font-size: 1.5rem;
    font-weight: bold;
    color: #EFEFB9;
    margin: 1rem 0;
    text-align: center;
}

/* botones reales */
.boton {
    width: 100%;
    height: 2.5rem;
    font-family: Montserrat, sans-serif;
    background-color: var(--color-principal);
    border-radius: 0.3rem;
    color: #EFEFB9;
    border: 1px solid #EFEFB9;
    cursor: pointer;
}

/* opcional: hover bonito */
.boton:hover {
    background-color: #84599e;
}

.boton2 {
    height: 2.5rem;
    font-family: Montserrat,sans-serif;
    background-color: var(--color-principal);
    border-radius: 0.3rem;
    color:#EFEFB9;
    border-color: #EFEFB9;
}

.seleccionado {
    background-color: #EFEFB9;
    color: var(--color-principal);
}

.texto {
    text-align: center;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f8f5fb;
}

.caracteristicas{
    max-width:85%;
    margin:40px auto;
    padding:1rem;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    gap:1rem;
}

.card{
    background:#fff;
    border-radius:18px;
    padding: 0.8rem;
    text-align:center;
    box-shadow:0 0.1rem 0.2rem rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 25px rgba(0,0,0,.15);
}

.icono{
    width:5rem;
    height:5rem;
    margin:0 auto 1rem;
    border-radius:50%;
    background:#efe2ff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.2rem;
}

.card h3{
    font-size:1.5rem;
    color:#111;
    margin-bottom:0.8rem;
}

.card p{
    font-size:1.1rem;
    color:#555;
    line-height:1.5;
}

.contenedor2cimgtex {
    text-align: center;
}

@media (max-width: 700px){
    header {
        background-color: var(--color-fondo);
    }

    /* En móvil mostramos la hamburguesa y ocultamos el menú */
    .btn-menu {
        display: flex;
        order: 2;
    }

    header nav {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--color-fondo);
        box-shadow: 0 10px 20px rgba(49, 2, 64, 0.12);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    header nav.abierto {
        max-height: 320px;
    }

    header nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
        font-size: 1rem;
    }

    header nav li {
        width: 100%;
        text-align: center;
    }

    header nav a {
        display: block;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid rgba(89, 12, 114, 0.08);
    }

    /* El botón de tienda/carrito queda al lado de la hamburguesa */
    header > .btn-tienda {
        order: 3;
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }

    .contenedorimg {
        width: 100%;
        max-width: 100%;
    }

    .img50 {
        width: 100%;
        max-width: 420px;
        padding: 0;
    }

    .tiendaimg2 {
        width: 100%;
        padding: 0;
    }

    .tiendaimg21 {
        width: 90%;
        padding: 0;
    }

    .contenedor2c {
        flex-direction: column;
        padding: 2rem 10px 10px;
    }

    .contenedor2c2 {
        flex-direction: column;
        padding: 10px 2rem;
    }

    .contenedor2c3 {
        display: flex;
        padding: 0;
    }

    .contenedor3c {
        flex-direction: column;
    }

    .tiendaimg {
        width: 11rem;
        padding-bottom: 2rem;
    }

    .card h3{
        font-size:1.1rem;
        padding: 0;
    }   

    .card p{
        font-size:1rem;
        padding: 0;
    }

    p {
        font-family: Montserrat, sans-serif;
        font-size: 1rem;
        text-align: center;
        padding: 0 0 0 1rem;
        width: 100%;
    }
    h1 {
        font-family: Anton, sans-serif;
        font-size:1.5rem;
        color: #310240;
    }

    h2 {
        font-family: Montserrat, sans-serif;
        font-size:1.3rem;
        color: #310240;
    }

    .textoh3 {
        text-align: center;
    }
}

/* ============================================================
   TIENDA CON CARRITO - Ser Café
   ============================================================ */

.banner-tienda {
    background: linear-gradient(135deg, var(--color-principal), #782494);
    color: #EFEFB9;
    text-align: center;
    padding: 3.5rem 1.5rem;
}

.banner-tienda h1 {
    color: #EFEFB9;
    margin: 0 0 0.8rem;
}

.banner-tienda p {
    color: #f3e9d8;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

/* ---------- CATÁLOGO ---------- */
.catalogo {
    max-width: 1200px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

.catalogo h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}

/* ---------- TARJETA DE PRODUCTO ---------- */
.producto {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.1);
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}

.producto:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.producto-imagen {
    width: 100%;
    height: 240px;
    object-fit: contain;
    background: #f3ebf7;
    padding: 0.5rem;
    box-sizing: border-box;
}

.producto-info {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.producto-nombre {
    font-family: Anton, sans-serif;
    color: var(--color-principal);
    margin: 0;
    font-size: 1.6rem;
    text-align: left;
}

.producto-presentacion {
    margin: 0;
    font-size: 1rem;
    color: #777;
    font-family: Montserrat, sans-serif;
}

.producto-precio {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #310240;
    font-family: Montserrat, sans-serif;
}

.producto-info label {
    font-size: 0.85rem;
    color: #555;
    font-family: Montserrat, sans-serif;
    margin-top: 0.3rem;
}

.producto-info .molienda {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.4rem;
    border: 1px solid #cbb2d6;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
}

/* Selector de cantidad en la tarjeta */
.cantidad-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.5rem 0;
}

.cantidad-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--color-principal);
    background: var(--color-principal);
    color: #EFEFB9;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.cantidad-btn:hover {
    background: #84599e;
}

.cantidad-box .cantidad {
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 1.5rem;
    text-align: center;
    color: #310240;
}

.btn-agregar {
    margin-top: auto;
    padding: 0.8rem;
    background: var(--color-principal);
    color: #EFEFB9;
    border: none;
    border-radius: 0.5rem;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-agregar:hover {
    background: #782494;
}

/* ---------- PANEL DE CARRITO ---------- */
.carrito-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1.2rem;
    box-sizing: border-box;
}

.carrito-panel.activo {
    transform: translateX(0);
}

.carrito-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carrito-header h2 {
    font-size: 1.6rem;
    margin: 0;
}

.cerrar-carrito {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-principal);
}

.carrito-items {
    margin: 1rem 0;
}

.carrito-items > p {
    text-align: center;
    color: #888;
    font-size: 1rem;
}

/* Item dentro del carrito */
.item-carrito {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
}

.img-carrito {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #f3ebf7;
}

.info-carrito {
    font-family: Montserrat, sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #333;
}

.info-carrito strong {
    color: var(--color-principal);
}

.acciones-carrito {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.acciones-carrito button {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.3rem;
    border: 1px solid var(--color-principal);
    background: #fff;
    color: var(--color-principal);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.acciones-carrito button:hover {
    background: var(--color-principal);
    color: #EFEFB9;
}

.acciones-carrito span {
    font-weight: bold;
    min-width: 1.5rem;
    text-align: center;
}

/* Ubicación y resumen dentro del carrito */
.ubicacion h3,
.resumen-compra h3 {
    color: var(--color-principal);
    text-align: left;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.ubicacion select,
.ubicacion input#municipioTexto {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid #cbb2d6;
    font-family: Montserrat, sans-serif;
    cursor: pointer;
    box-sizing: border-box;
}

.ubicacion input#municipioTexto {
    cursor: text;
}

.carrito-panel hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 1rem 0;
}

.fila-resumen {
    display: flex;
    justify-content: space-between;
    font-family: Montserrat, sans-serif;
    margin-bottom: 0.5rem;
    color: #444;
}

.fila-resumen.total {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-principal);
    border-top: 2px solid #eee;
    padding-top: 0.6rem;
    margin-top: 0.4rem;
}

/* Botón pagar */
.pago {
    margin-top: 1rem;
}

.btn-pagar {
    width: 100%;
    padding: 1rem;
    background: var(--color-principal);
    color: #EFEFB9;
    border: none;
    border-radius: 0.5rem;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-pagar:hover {
    background: #782494;
}

#epayco-button-container {
    margin-top: 0.8rem;
    text-align: center;
}

/* Botón "Pagar" generado tras confirmar el pedido */
.btn-epayco-pagar {
    width: 100%;
    padding: 1rem;
    background: #2e8b57;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 8px 20px rgba(46, 139, 87, 0.3);
}

.btn-epayco-pagar:hover {
    background: #26734a;
    transform: translateY(-2px);
}

.cargando-pago {
    font-family: Montserrat, sans-serif;
    color: var(--color-principal);
    font-size: 0.9rem;
    margin: 0.6rem 0;
}

/* Overlay oscuro */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 999;
}

.overlay.activo {
    opacity: 1;
    visibility: visible;
}

/* Notificación "agregado al carrito" */
.toast-carrito {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(2rem);
    background: var(--color-principal);
    color: #EFEFB9;
    padding: 0.9rem 1.6rem;
    border-radius: 0.6rem;
    font-family: Montserrat, sans-serif;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1100;
}

.toast-carrito.activo {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Loading */
.loading {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    font-size: 1.3rem;
    color: var(--color-principal);
    z-index: 1200;
}

/* ---------- FOOTER ---------- */
footer,
.footer-sercafe {
    background: var(--color-principal);
    color: #EFEFB9;
    padding: 2.5rem 1rem;
    margin-top: 3rem;
}

.footer-contenido {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.footer-logo {
    width: 130px;
    margin-bottom: 1rem;
}

.footer-contenido p {
    color: #f3e9d8;
    font-size: 1rem;
    margin: 0.3rem 0;
    text-align: center;
}

.footer-copy {
    font-size: 0.85rem !important;
    opacity: 0.8;
    margin-top: 1rem !important;
}

/* Redes sociales en el footer */
.footer-redes {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.2rem 0 0.5rem;
}

.red-social {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 239, 185, 0.15);
    transition: transform 0.2s, background 0.2s;
}

.red-social img {
    width: 1.1rem;
    height: 1.1rem;
    /* Iconos SVG en blanco para contrastar con el fondo morado */
    filter: brightness(0) invert(1);
}

.red-social:hover {
    transform: translateY(-4px);
}

.red-social.facebook:hover {
    background: #1877f2;
}

.red-social.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.red-social.whatsapp:hover {
    background: #25d366;
}

/* ---------- BOTÓN FLOTANTE WHATSAPP ---------- */
.whatsapp-flotante {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: #25d366;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 1500;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: wa-pulse 2.5s infinite;
}

.whatsapp-flotante img {
    width: 1.7rem;
    height: 1.7rem;
    filter: brightness(0) invert(1);
}

.whatsapp-flotante:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

@keyframes wa-pulse {
    0% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

@media (max-width: 700px) {
    .whatsapp-flotante {
        bottom: 1rem;
        right: 1rem;
        width: 2.7rem;
        height: 2.7rem;
    }
    .whatsapp-flotante img {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ---------- RESPONSIVE TIENDA ---------- */
@media (max-width: 700px) {
    .banner-tienda {
        padding: 2.5rem 1rem;
    }

    .carrito-panel {
        width: 100%;
        max-width: 100vw;
    }

    .producto-imagen {
        height: 200px;
    }

    .banner-tienda p {
        padding: 0;
    }
}

/* ---------- PÁGINA CONTACTO ---------- */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
    align-items: start;
}

.contacto-info {
    text-align: center;
}

.contacto-img {
    width: 60%;
    max-width: 260px;
    height: auto;
    margin-bottom: 1rem;
}

.contacto-info h2 {
    text-align: center;
}

.contacto-lista {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.contacto-lista a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: Montserrat, sans-serif;
    font-size: 1.1rem;
    color: var(--color-principal);
    font-weight: 600;
    transition: color 0.2s;
}

.contacto-lista a:hover {
    color: #782494;
}

.contacto-lista img {
    width: 1.6rem;
    height: 1.6rem;
}

.contacto-form iframe {
    width: 100%;
    border-radius: 0.6rem;
    background: #fff;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.1);
}

@media (max-width: 700px) {
    .contacto-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
}

/* ============================================================
   PÁGINA PERFIL (paneles sensoriales estilo ficha de origen)
   ============================================================ */
.perfil-panel {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1.2fr;
    gap: 2.5rem;
    align-items: center;
    padding: 3.5rem 2rem;
    /* Fondo por defecto; cada variedad lo sobrescribe más abajo */
    background: linear-gradient(135deg, #7a3c93 0%, #5e2d78 100%);
    color: #fbf3e4;
}

/* --- Colores por variedad: más claros, con contraste, dentro de la marca --- */

/* Castillo Sur: lila-morado luminoso */
.perfil-panel.panel-castillo {
    background: linear-gradient(135deg, #8a4ea6 0%, #6a3488 100%);
}

/* Chiroso: lila rosado (acentos cítricos / durazno) */
.perfil-panel.panel-chiroso {
    background: linear-gradient(135deg, #a85a9d 0%, #7d3e86 100%);
}

/* Catimor: morado cálido con matiz vino (cacao / nuez) */
.perfil-panel.panel-catimor {
    background: linear-gradient(135deg, #8f4a73 0%, #6e3270 100%);
}

/* ---------- Columna izquierda: perfil sensorial ---------- */
.perfil-sensorial {
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.2rem;
    padding: 1.8rem 1.6rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.perfil-titulo {
    font-family: Anton, sans-serif;
    font-size: 2.4rem;
    color: var(--color-texto-hueso);
    margin: 0 0 1.3rem;
    text-align: left;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.perfil-titulo::after {
    content: "";
    flex: 1;
    height: 2px;
    background: rgba(239, 239, 185, 0.4);
    border-radius: 2px;
}

.notas {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.notas li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.7rem;
    padding: 0.5rem 0.7rem;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: var(--color-texto-hueso);
    transition: background 0.25s ease, transform 0.25s ease;
}

.notas li:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(4px);
}

.nota-icono {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-texto-hueso);
    border-radius: 50%;
    font-size: 1.1rem;
}

/* Medidores (tostión, acidez, complejidad) */
.medidor {
    margin-bottom: 1.1rem;
}

.medidor:last-child {
    margin-bottom: 0;
}

.medidor-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-texto-hueso);
    margin-bottom: 0.45rem;
}

.medidor-valor {
    font-weight: 600;
    font-size: 0.78rem;
    opacity: 0.75;
}

/* Barra de progreso rellena */
.barra {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.barra::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--pos, 50%);
    background: linear-gradient(90deg, var(--color-texto-hueso), #fff);
    border-radius: 999px;
    transition: width 0.6s ease;
}

.barra[data-nivel="1"] { --pos: 20%; }
.barra[data-nivel="2"] { --pos: 40%; }
.barra[data-nivel="3"] { --pos: 60%; }
.barra[data-nivel="4"] { --pos: 80%; }
.barra[data-nivel="5"] { --pos: 100%; }

/* ---------- Columna derecha: ficha de la finca ---------- */
.perfil-ficha {
    max-width: 420px;
}

.finca-nombre {
    font-family: Anton, sans-serif;
    font-size: 2.6rem;
    color: var(--color-texto-hueso);
    margin: 0 0 0.3rem;
    text-align: left;
    line-height: 1.05;
}

.finca-ubicacion {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: #f3e9d8;
    margin: 0 0 1.3rem;
    font-size: 1.05rem;
    text-align: left;
}

.ficha-datos {
    list-style: none;
    padding: 0;
    margin: 0 0 1.6rem;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #f3e9d8;
}

.ficha-datos strong {
    color: var(--color-texto-hueso);
}

.ficha-bloque {
    margin-bottom: 1.3rem;
}

.ficha-label {
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: var(--color-texto-hueso);
    margin-bottom: 0.6rem;
}

.ficha-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ficha-chips.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border: 2px solid var(--color-texto-hueso);
    border-radius: 0.5rem;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: var(--color-texto-hueso);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
}

.chip-activo {
    background: var(--color-texto-hueso);
    color: var(--color-principal);
}

.btn-perfil {
    display: inline-block;
    margin-top: 0.6rem;
    text-decoration: none;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    background: var(--color-texto-hueso);
    color: var(--color-principal);
    border: none;
    padding: 0.9rem 1.4rem;
    border-radius: 0.6rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-perfil:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* Imagen central del panel */
.perfil-imagen {
    display: flex;
    justify-content: center;
}

/* ---------- CARRUSEL ---------- */
.carrusel {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
}

/* Dentro del panel de perfil el carrusel es transparente;
   en otros contextos conserva su fondo claro */
.perfil-imagen .carrusel {
    background: transparent;
}

.carrusel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrusel-slide.activo {
    opacity: 1;
}

.carrusel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* Flechas */
.carrusel-prev,
.carrusel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background: rgba(89, 12, 114, 0.6);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrusel-prev:hover,
.carrusel-next:hover {
    background: var(--color-principal);
}

.carrusel-prev { left: 0.6rem; }
.carrusel-next { right: 0.6rem; }

/* Puntos */
.carrusel-puntos {
    position: absolute;
    bottom: 0.7rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    z-index: 2;
}

.carrusel-punto {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: none;
    background: rgba(89, 12, 114, 0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.carrusel-punto.activo {
    background: var(--color-principal);
}

@media (max-width: 980px) {
    .perfil-panel {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 1.5rem;
    }
    .perfil-sensorial,
    .perfil-ficha {
        max-width: 460px;
        margin: 0 auto;
        width: 100%;
    }
    .perfil-imagen { order: -1; }
    .perfil-titulo,
    .finca-nombre,
    .finca-ubicacion {
        text-align: center;
    }
    .carrusel {
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .ficha-chips.grid-2 {
        grid-template-columns: 1fr 1fr;
    }
    .perfil-titulo { font-size: 2.4rem; }
    .finca-nombre { font-size: 2.1rem; }
}

/* ---------- SECCIONES NOSOTROS ---------- */
.section {
    max-width: 1000px;
    margin: 2.5rem auto;
    padding: 1.5rem;
    text-align: center;
}

.section h2 {
    text-align: center;
}

.section p {
    text-align: center;
    max-width: 750px;
    margin: 1rem auto;
}

.finca-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    text-align: left;
}

.finca-text {
    text-align: left;
}

.finca-text p {
    text-align: left;
    margin-left: 0;
}

.finca-img {
    display: flex;
    justify-content: center;
}

.finca-img img {
    max-width: 100%;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.equipo,
.proposito {
    background: var(--color-fondo-text);
    border-radius: 18px;
}

/* CTA */
.cta {
    text-align: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, var(--color-principal), #782494);
    margin: 3rem 0 0;
}

.cta h2 {
    color: #EFEFB9;
    margin-bottom: 1.5rem;
}

.cta .btn-tienda {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
}

h4.textoh3 {
    text-align: center;
    margin-bottom: 0.6rem;
}

@media (max-width: 700px) {
    .finca-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .finca-text,
    .finca-text p {
        text-align: center;
    }
}

/* ---------- CTA EN HERO (index) ---------- */
.btn-hero {
    display: inline-block;
    margin-top: 1.2rem;
    text-decoration: none;
    font-weight: 600;
    font-family: Montserrat, sans-serif;
}

/* Imágenes del home: evitar que se vean desproporcionadas */
.contenedor2c2 .img50,
.contenedor2c .img50 {
    object-fit: cover;
    border-radius: 18px;
}

/* Imágenes de la sección "historia" (Nosotros): encuadre uniforme y estilizado */
.contenedor2c3 .contenedorimg {
    max-width: 320px;
}

.contenedor2c3 .img50 {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1rem;
}

@media (max-width: 700px) {
    .contenedor2c3 {
        flex-direction: column;
    }
    .contenedor2c3 .contenedorimg,
    .contenedor2c3 .img50 {
        max-width: 420px;
    }
    .contenedor2c3 .img50 {
        width: 100%;
    }
}

/* ============================================================
   TOOLTIP FLOTANTE DE PERFIL (tienda, al pasar por un producto)
   ============================================================ */
.perfil-flotante {
    position: fixed;
    z-index: 1300;
    width: 290px;
    max-width: 85vw;
    background: #ffffff;
    color: #3a2140;
    border: 1px solid #e4d2ec;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(69, 9, 90, 0.28);
    padding: 1rem 1.1rem;
    font-family: Montserrat, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.perfil-flotante.activo {
    opacity: 1;
    transform: translateY(0);
}

.perfil-flotante .pf-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    border-bottom: 2px solid #f0e6f5;
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}

.perfil-flotante .pf-header h4 {
    margin: 0;
    font-family: Anton, sans-serif;
    font-size: 1.3rem;
    color: var(--color-principal);
    letter-spacing: 0.01em;
}

.perfil-flotante .pf-presentacion {
    background: var(--color-principal);
    color: var(--color-texto-hueso);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.perfil-flotante .pf-origen {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a2b56;
    line-height: 1.35;
}

.perfil-flotante .pf-icono {
    flex-shrink: 0;
}

.perfil-flotante .pf-sub {
    font-size: 0.8rem;
    color: #7a6383;
    margin: 0.35rem 0 0.7rem;
    line-height: 1.4;
}

.perfil-flotante .pf-notas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.perfil-flotante .pf-nota {
    background: #f4ebf8;
    color: var(--color-principal);
    border: 1px solid #e2cfec;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.perfil-flotante .pf-medidor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a2b56;
    margin-top: 0.4rem;
}

.perfil-flotante .pf-escala {
    display: flex;
    gap: 0.28rem;
}

.perfil-flotante .pf-punto {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #e4d2ec;
    display: inline-block;
}

.perfil-flotante .pf-punto.activo {
    background: var(--color-principal);
}

/* En pantallas táctiles el tooltip puede resultar molesto: lo mantenemos
   pero no se dispara sin hover real; en móvil se oculta por seguridad */
@media (hover: none) {
    .perfil-flotante {
        display: none;
    }
}

/* ============================================================
   TRAYECTORIA "DEL CULTIVO A TU TAZA" (página Nosotros)
   ============================================================ */
.proceso {
    max-width: 820px;
    margin: 3rem auto;
    padding: 0 1.2rem;
}

.proceso-titulo {
    text-align: center;
    margin-bottom: 0.4rem;
}

.proceso-intro {
    text-align: center;
    color: #7a6383;
    max-width: 540px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
}

/* La lista es la línea vertical de la trayectoria */
.trayectoria {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.trayectoria::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 2rem;
    width: 3px;
    background: linear-gradient(to bottom, var(--color-principal), #b98fcf);
    border-radius: 3px;
}

.paso {
    position: relative;
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.6rem 0 1.8rem;
}

.paso:last-child {
    padding-bottom: 0;
}

/* Nodo con el ícono sobre la línea */
.paso-icono {
    position: relative;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 6px 16px rgba(69, 9, 90, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.paso:hover .paso-icono {
    transform: scale(1.08);
    box-shadow: 0 10px 22px rgba(69, 9, 90, 0.3);
}

/* Número de paso tenue, como marca de agua */
.paso-num {
    position: absolute;
    top: -0.3rem;
    left: 3.2rem;
    font-family: Anton, sans-serif;
    font-size: 2.4rem;
    color: rgba(89, 12, 114, 0.12);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.paso-texto {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--color-principal);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.paso:hover .paso-texto {
    transform: translateX(4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}

.paso-texto h4 {
    margin: 0 0 0.35rem;
    font-family: Montserrat, sans-serif;
    font-size: 1.2rem;
    color: var(--color-principal);
}

.paso-texto p {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 700px) {
    .trayectoria::before {
        left: 1.6rem;
    }
    .paso {
        grid-template-columns: 3.2rem 1fr;
        gap: 0.8rem;
        padding-bottom: 1.4rem;
    }
    .paso-icono {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.35rem;
    }
    .paso-num {
        left: 2.5rem;
        font-size: 1.9rem;
    }
    .paso-texto {
        padding: 0.8rem 0.9rem;
    }
    .paso-texto h4 {
        font-size: 1.05rem;
    }
    .paso-texto p {
        font-size: 0.95rem;
        text-align: left;
        padding: 0;
    }
}

/* ============================================================
   NOSOTROS v2 — propuesta editorial (archivo nosotros-v2.html)
   Prefijo .n2 para no interferir con los estilos existentes
   ============================================================ */

.n2 {
    color: #3a2140;
    font-family: Montserrat, sans-serif;
}

.n2 h1, .n2 h2, .n2 h3 {
    font-family: Anton, sans-serif;
    color: var(--color-principal);
    letter-spacing: 0.01em;
}

/* ---------- HERO ---------- */
.n2-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fbf3e4;
    overflow: hidden;
    background: linear-gradient(135deg, #45095a, #782494);
}

.n2-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.38;
}

.n2-hero-overlay {
    position: relative;
    z-index: 1;
    max-width: 820px;
    padding: 3rem 1.5rem;
}

.n2-hero h1 {
    color: #fbf3e4;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    margin: 0 0 1rem;
    line-height: 1.05;
}

.n2-hero p {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    max-width: 620px;
    margin: 0 auto;
    color: #f3e4ef;
    line-height: 1.6;
}

.n2-hero .n2-kicker {
    display: inline-block;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--color-texto-hueso);
    margin-bottom: 1.2rem;
    border: 1px solid rgba(239, 239, 185, 0.5);
    padding: 0.4rem 1rem;
    border-radius: 999px;
}

/* ---------- CONTENEDOR GENERAL ---------- */
.n2-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.n2-section {
    padding: 4.5rem 0;
}

.n2-section.n2-alt {
    background: var(--color-fondo-text);
}

.n2-eyebrow {
    display: block;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: #a06bbd;
    margin-bottom: 0.5rem;
}

.n2-section > .n2-wrap > h2 {
    text-align: center;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin: 0 0 2.5rem;
}

/* ---------- BLOQUES ALTERNADOS (zigzag) ---------- */
.n2-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

.n2-split:last-child {
    margin-bottom: 0;
}

.n2-split.invertido .n2-split-media {
    order: 2;
}

.n2-split-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 1.2rem;
    box-shadow: 0 20px 45px rgba(69, 9, 90, 0.22);
    display: block;
}

.n2-split-text h3 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 1rem;
}

.n2-split-text p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: #4a3a52;
    margin: 0 0 1rem;
}

/* ---------- FRANJA DE DATOS DESTACADOS ---------- */
.n2-stats {
    background: linear-gradient(135deg, var(--color-principal), #782494);
    color: #fbf3e4;
}

.n2-stats .n2-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.n2-stat .n2-stat-num {
    font-family: Anton, sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    color: var(--color-texto-hueso);
    line-height: 1;
    display: block;
}

.n2-stat .n2-stat-label {
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    margin-top: 0.5rem;
    display: block;
    color: #f3e4ef;
}

/* ---------- GALERÍA / PLACEHOLDERS PARA FOTOS FUTURAS ---------- */
.n2-galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.n2-foto {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

.n2-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.n2-foto:hover img {
    transform: scale(1.06);
}

.n2-foto figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9rem 1rem;
    background: linear-gradient(to top, rgba(45, 9, 58, 0.85), transparent);
    color: #fbf3e4;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Placeholder "foto por tomar" */
.n2-foto.n2-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.6rem;
    background:
        repeating-linear-gradient(45deg, #efe2ff 0 12px, #e7d6f5 12px 24px);
    border: 2px dashed #b98fcf;
    color: var(--color-principal);
    text-align: center;
    padding: 1rem;
    box-shadow: none;
}

.n2-foto.n2-placeholder .n2-ph-icono {
    font-size: 2.2rem;
}

.n2-foto.n2-placeholder .n2-ph-titulo {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
}

.n2-foto.n2-placeholder .n2-ph-nota {
    font-size: 0.78rem;
    color: #7a5a90;
    font-family: Montserrat, sans-serif;
    max-width: 85%;
}

/* ---------- CITA / FRASE ---------- */
.n2-cita {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.n2-cita blockquote {
    font-family: Anton, sans-serif;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    color: var(--color-principal);
    line-height: 1.25;
    margin: 0 0 1rem;
}

.n2-cita blockquote::before { content: "“"; }
.n2-cita blockquote::after { content: "”"; }

.n2-cita cite {
    font-style: normal;
    font-weight: 700;
    color: #7a6383;
    font-family: Montserrat, sans-serif;
}

/* ---------- CTA ---------- */
.n2-cta {
    text-align: center;
    padding: 4rem 1.5rem;
    background: linear-gradient(135deg, var(--color-principal), #45095a);
    color: #fbf3e4;
}

.n2-cta h2 {
    color: #fbf3e4;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    margin: 0 0 1.5rem;
}

.n2-cta .btn-tienda {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    background: var(--color-texto-hueso);
    color: var(--color-principal);
    border: none;
    padding: 1rem 2rem;
    border-radius: 0.6rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.n2-cta .btn-tienda:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    background: #fff;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 820px) {
    .n2-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    .n2-split.invertido .n2-split-media {
        order: 0;
    }
    .n2-split-text {
        text-align: center;
    }
    .n2-split-media img {
        max-width: 460px;
        margin: 0 auto;
    }
    .n2-stats .n2-wrap {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .n2-galeria {
        grid-template-columns: repeat(2, 1fr);
    }
    .n2-section {
        padding: 3rem 0;
    }
}

@media (max-width: 460px) {
    .n2-galeria {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PERFIL v2 — una tarjeta grande por variedad
   (archivo perfil-v2.html, prefijo .pv2)
   ============================================================ */
.pv2-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.pv2-card {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 24px 55px rgba(69, 9, 90, 0.16);
    border: 1px solid #efe2f7;
}

/* Lado de la imagen (con fondo de color por variedad) */
.pv2-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    min-height: 340px;
    background: linear-gradient(135deg, #8a4ea6 0%, #6a3488 100%);
}

/* --- Identidad de color por variedad (según la etiqueta de cada bolsa) ---
   Castillo Sur -> azul · Chiroso -> verde · Catimor -> naranja/mostaza.
   Cada tarjeta define sus propias variables y el resto de los elementos
   (badge, chips, barras, datos y CTA) las heredan. */
.pv2-card.var-castillo {
    --var-color: #2f80c4;
    --var-color-oscuro: #1f5d93;
    --var-color-suave: #e9f3fb;
    --var-color-borde: #cfe4f5;
}
.pv2-card.var-chiroso {
    --var-color: #5aa845;
    --var-color-oscuro: #3f8130;
    --var-color-suave: #edf6ea;
    --var-color-borde: #d4e9cd;
}
.pv2-card.var-catimor {
    --var-color: #e39a1c;
    --var-color-oscuro: #b87611;
    --var-color-suave: #fdf3e0;
    --var-color-borde: #f6e4c2;
}

/* Fondo del lado de la imagen con el color de la variedad */
.pv2-card.var-castillo .pv2-media { background: linear-gradient(135deg, #3f93d6 0%, #1f5d93 100%); }
.pv2-card.var-chiroso  .pv2-media { background: linear-gradient(135deg, #6fbb57 0%, #3f8130 100%); }
.pv2-card.var-catimor  .pv2-media { background: linear-gradient(135deg, #f0ab30 0%, #b87611 100%); }

/* Borde superior de acento en cada tarjeta */
.pv2-card { border-top: 5px solid var(--var-color, var(--color-principal)); }

.pv2-media .carrusel {
    max-width: 320px;
    background: transparent;
}

.pv2-badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--var-color, var(--color-principal));
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}

/* Lado del contenido */
.pv2-body {
    padding: 2.4rem 2.4rem 2.6rem;
    display: flex;
    flex-direction: column;
}

.pv2-body h2 {
    font-family: Anton, sans-serif;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    color: var(--var-color-oscuro, var(--color-principal));
    margin: 0 0 0.2rem;
}

.pv2-origen {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    color: #7a6383;
    margin: 0 0 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Chips de notas */
.pv2-notas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
}

.pv2-nota {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--var-color-suave, #f4ebf8);
    color: var(--var-color-oscuro, var(--color-principal));
    border: 1px solid var(--var-color-borde, #e2cfec);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Datos ficha */
.pv2-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}

.pv2-dato {
    background: var(--var-color-suave, #faf6fd);
    border-radius: 0.8rem;
    padding: 0.8rem;
    text-align: center;
    border: 1px solid var(--var-color-borde, #f0e6f5);
}

.pv2-dato .pv2-dato-icono { font-size: 1.3rem; }

.pv2-dato .pv2-dato-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9b84a8;
    font-family: Montserrat, sans-serif;
    margin: 0.3rem 0 0.1rem;
}

.pv2-dato .pv2-dato-valor {
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    color: #3a2140;
    font-size: 0.92rem;
}

/* Medidores sensoriales */
.pv2-medidores {
    margin-bottom: 1.8rem;
}

.pv2-medidor {
    margin-bottom: 0.9rem;
}

.pv2-medidor:last-child { margin-bottom: 0; }

.pv2-medidor-label {
    display: flex;
    justify-content: space-between;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: #4a3a52;
    margin-bottom: 0.4rem;
}

.pv2-medidor-label span:last-child {
    color: var(--var-color-oscuro, var(--color-principal));
    font-weight: 600;
}

.pv2-barra {
    height: 8px;
    border-radius: 999px;
    background: #efe2f7;
    overflow: hidden;
}

.pv2-barra > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--var-color-oscuro, var(--color-principal)), var(--var-color, #a85a9d));
    width: var(--pos, 50%);
}

.pv2-barra[data-nivel="1"] { --pos: 20%; }
.pv2-barra[data-nivel="1.5"] { --pos: 30%; }
.pv2-barra[data-nivel="2"] { --pos: 40%; }
.pv2-barra[data-nivel="2.5"] { --pos: 50%; }
.pv2-barra[data-nivel="3"] { --pos: 60%; }
.pv2-barra[data-nivel="3.5"] { --pos: 70%; }
.pv2-barra[data-nivel="4"] { --pos: 80%; }
.pv2-barra[data-nivel="4.5"] { --pos: 90%; }
.pv2-barra[data-nivel="5"] { --pos: 100%; }

.pv2-cta {
    margin-top: auto;
    display: inline-block;
    align-self: flex-start;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    background: var(--var-color, var(--color-principal));
    color: #fff;
    padding: 0.9rem 1.6rem;
    border-radius: 0.6rem;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.pv2-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
    background: var(--var-color-oscuro, #782494);
}

@media (max-width: 820px) {
    .pv2-card {
        grid-template-columns: 1fr;
    }
    .pv2-media {
        min-height: 260px;
        padding: 2rem;
    }
    .pv2-media .carrusel {
        max-width: 240px;
    }
    .pv2-body {
        padding: 1.8rem 1.4rem 2rem;
    }
    .pv2-datos {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    .pv2-cta {
        align-self: stretch;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .pv2-datos {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FORMULARIO DE CONTACTO v2 (propio, estilizado)
   ============================================================ */
.cv2-grid {
    max-width: 1080px;
    margin: 3.5rem auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2.5rem;
    align-items: start;
}

.cv2-info h2 {
    font-family: Anton, sans-serif;
    color: var(--color-principal);
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    margin: 0 0 0.8rem;
}

.cv2-info p {
    color: #4a3a52;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.cv2-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cv2-lista a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: #3a2140;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    background: #faf6fd;
    border: 1px solid #f0e6f5;
    border-radius: 0.7rem;
    padding: 0.7rem 1rem;
    transition: background 0.2s, transform 0.2s;
}

.cv2-lista a:hover {
    background: #f1e5f8;
    transform: translateX(4px);
}

.cv2-lista img {
    width: 1.4rem;
    height: 1.4rem;
}

/* Tarjeta del formulario */
.cv2-form-card {
    background: #fff;
    border-radius: 1.3rem;
    box-shadow: 0 20px 48px rgba(69, 9, 90, 0.14);
    border: 1px solid #efe2f7;
    padding: 2rem;
}

.cv2-form-card h3 {
    font-family: Anton, sans-serif;
    color: var(--color-principal);
    margin: 0 0 1.3rem;
    font-size: 1.5rem;
}

.cv2-campo {
    margin-bottom: 1.1rem;
}

.cv2-campo label {
    display: block;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #4a3a52;
    margin-bottom: 0.4rem;
}

.cv2-campo input,
.cv2-campo textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.9rem;
    border: 1.5px solid #e2cfec;
    border-radius: 0.6rem;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    color: #3a2140;
    background: #fdfbfe;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cv2-campo input:focus,
.cv2-campo textarea:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 3px rgba(89, 12, 114, 0.12);
}

.cv2-campo textarea {
    min-height: 130px;
    resize: vertical;
}

.cv2-enviar {
    width: 100%;
    padding: 1rem;
    background: var(--color-principal);
    color: var(--color-texto-hueso);
    border: none;
    border-radius: 0.6rem;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.cv2-enviar:hover {
    background: #782494;
    transform: translateY(-2px);
}

.cv2-enviar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Mensajes de estado */
.cv2-estado {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.6rem;
    font-family: Montserrat, sans-serif;
    font-size: 0.95rem;
    display: none;
}

.cv2-estado.ok {
    display: block;
    background: #e7f6ec;
    color: #1d7a3e;
    border: 1px solid #b7e3c6;
}

.cv2-estado.error {
    display: block;
    background: #fdecec;
    color: #b32020;
    border: 1px solid #f3c4c4;
}

@media (max-width: 820px) {
    .cv2-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   PÁGINA DE GRACIAS (gracias.html, prefijo .gracias)
   Mantiene la paleta morada y el estilo de las tarjetas.
   ============================================================ */
.gracias-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
}

.gracias-card {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid #efe2f7;
    box-shadow: 0 24px 55px rgba(69, 9, 90, 0.16);
    padding: 3rem 2.4rem 2.6rem;
    text-align: center;
    position: relative;
}

.gracias-check {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-principal), #782494);
    color: #fff;
    font-size: 2.4rem;
    line-height: 76px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(89, 12, 114, 0.35);
}

.gracias-card .n2-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
}

.gracias-card h2 {
    font-family: Anton, sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    color: var(--color-principal);
    margin: 0 0 1rem;
}

.gracias-mensaje {
    font-family: Montserrat, sans-serif;
    color: #5f4a68;
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 auto 1.8rem;
}

/* Referencia / estado */
.gracias-ref {
    background: #faf6fd;
    border: 1px solid #f0e6f5;
    border-radius: 0.9rem;
    padding: 1rem 1.3rem;
    margin: 0 auto 1.8rem;
    max-width: 420px;
    font-family: Montserrat, sans-serif;
}

.gracias-ref-fila {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    color: #5f4a68;
}

.gracias-ref-fila strong { color: #3a2140; }

.estado-ok { color: #2e8b57 !important; }
.estado-error { color: #c0392b !important; }

/* Resumen del pedido */
.gracias-resumen {
    text-align: left;
    border-top: 1px solid #f0e6f5;
    padding-top: 1.6rem;
    margin-top: 0.4rem;
}

.gracias-resumen h3 {
    font-family: Montserrat, sans-serif;
    color: var(--color-principal);
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.gracias-items {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.gracias-item {
    display: grid;
    grid-template-columns: 48px 1fr auto auto;
    align-items: center;
    gap: 0.8rem;
    font-family: Montserrat, sans-serif;
}

.gracias-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #faf6fd;
}

.gracias-item-info { display: flex; flex-direction: column; }
.gracias-item-info strong { color: #3a2140; font-size: 0.95rem; }
.gracias-item-info span { color: #9b84a8; font-size: 0.82rem; }

.gracias-item-cant {
    color: #7a6383;
    font-weight: 600;
    font-size: 0.9rem;
}

.gracias-item-precio {
    color: var(--color-principal);
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.gracias-totales {
    border-top: 1px solid #f0e6f5;
    padding-top: 1rem;
    font-family: Montserrat, sans-serif;
}

.gracias-fila {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    color: #5f4a68;
}

.gracias-fila-total {
    font-weight: 700;
    color: var(--color-principal);
    font-size: 1.1rem;
    border-top: 1px dashed #e2cfec;
    margin-top: 0.4rem;
    padding-top: 0.7rem;
}

.gracias-envio-a {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: #7a6383;
}

/* Botones de acción */
.gracias-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin: 2rem 0 1.4rem;
}

.n2-btn-primario,
.n2-btn-secundario {
    display: inline-block;
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    padding: 0.9rem 1.7rem;
    border-radius: 0.6rem;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.n2-btn-primario {
    background: var(--color-principal);
    color: var(--color-texto-hueso);
    border: 1px solid var(--color-principal);
}

.n2-btn-primario:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(69, 9, 90, 0.28);
    background: #782494;
}

.n2-btn-secundario {
    background: #fff;
    color: var(--color-principal);
    border: 1px solid var(--color-principal);
}

.n2-btn-secundario:hover {
    transform: translateY(-3px);
    background: #faf6fd;
}

.gracias-contacto {
    font-family: Montserrat, sans-serif;
    font-size: 0.9rem;
    color: #9b84a8;
}

.gracias-contacto a {
    color: var(--color-principal);
    font-weight: 600;
}

@media (max-width: 560px) {
    .gracias-card { padding: 2.2rem 1.4rem 2rem; }
    .gracias-item {
        grid-template-columns: 44px 1fr auto;
    }
    .gracias-item-cant { display: none; }
    .gracias-acciones .n2-btn-primario,
    .gracias-acciones .n2-btn-secundario { flex: 1 1 auto; text-align: center; }
}


/* ============================================================
   DATOS DEL CLIENTE Y CONSENTIMIENTO (carrito)
   ============================================================ */
.datos-cliente h3 {
    color: var(--color-principal);
    text-align: left;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.datos-cliente input {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid #cbb2d6;
    font-family: Montserrat, sans-serif;
    box-sizing: border-box;
}

.datos-cliente input:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 2px rgba(89, 12, 114, 0.15);
}

.consent-carrito {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: Montserrat, sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #5f4a68;
    margin: 0.4rem 0 1rem;
    cursor: pointer;
}

.consent-carrito input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 16px;
    height: 16px;
    accent-color: var(--color-principal);
    flex-shrink: 0;
    cursor: pointer;
}

.consent-carrito a {
    color: var(--color-principal);
    font-weight: 600;
}


/* ============================================================
   PÁGINAS LEGALES (privacidad.html, prefijo .legal)
   ============================================================ */
.legal-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    font-family: Montserrat, sans-serif;
    color: #4a3a52;
    line-height: 1.7;
}

.legal-wrap .legal-fecha {
    color: #9b84a8;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.legal-wrap h2 {
    color: var(--color-principal);
    font-family: Montserrat, sans-serif;
    font-size: 1.2rem;
    margin: 2rem 0 0.6rem;
}

.legal-wrap ul {
    padding-left: 1.2rem;
    margin: 0.4rem 0 1rem;
}

.legal-wrap li { margin-bottom: 0.4rem; }

.legal-wrap a {
    color: var(--color-principal);
    font-weight: 600;
}