@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
BASE
============================================================ */

html,
body {


width: 100%;
margin: 0;
padding: 0;

overflow-x: hidden;

background: #f7f7f7;

font-family: 'Inter', sans-serif;

color: #333;

line-height: 1.5;


}

.producto-page {


width: 100%;

display: flex;

justify-content: center;

padding: 45px 20px;

box-sizing: border-box;


}

.formulario-interno {


width: 100%;

max-width: 1320px;


}

/* ============================================================
CONTENEDOR PRINCIPAL
============================================================ */

.producto-container-amazon {


display: grid;

grid-template-columns:
    350px
    minmax(0, 1fr)
    310px;

gap: 38px;

width: 100%;

background: #fff;

padding: 36px;

border-radius: 20px;

border: 1px solid #e8e8e8;

box-shadow:
    0 14px 45px rgba(0, 0, 0, 0.06);

box-sizing: border-box;

align-items: start;


}

/* ============================================================
COLUMNA IMAGEN
============================================================ */

.col-imagen {


position: sticky;

top: 25px;

display: flex;

flex-direction: column;

align-items: center;

align-self: start;


}

.imagen-card {


width: 100%;

min-height: 410px;

display: flex;

align-items: center;

justify-content: center;

background:
    linear-gradient(
        145deg,
        #ffffff 0%,
        #fafafa 100%
    );

border-radius: 18px;

border: 1px solid #e9e9e9;

padding: 25px;

box-sizing: border-box;

position: relative;

overflow: hidden;


}

.imagen-card::before {


content: "";

position: absolute;

width: 230px;

height: 230px;

background:
    rgba(212, 175, 55, 0.07);

border-radius: 50%;

bottom: -125px;

right: -80px;

pointer-events: none;


}

.imagen-card::after {


content: "";

position: absolute;

width: 160px;

height: 160px;

background:
    rgba(212, 175, 55, 0.035);

border-radius: 50%;

top: -85px;

left: -70px;

pointer-events: none;


}

.imagen-badge {


position: absolute;

top: 15px;

left: 15px;

z-index: 3;

padding: 5px 9px;

border-radius: 5px;

color: #d4af37;

font-size: 9px;

font-weight: 800;

letter-spacing: 1.2px;


}

.imagen-wrapper {


width: 100%;

height: 100%;

min-height: 350px;

display: flex;

align-items: center;

justify-content: center;

position: relative;

z-index: 2;

overflow: hidden;

border-radius: 12px;


}

.img-principal {


width: 100%;

height: 360px;

object-fit: contain;

border-radius: 10px;

cursor: zoom-in;

transition:
    transform 0.45s ease;

transform-origin: center center;


}

.img-principal.imagen-zoom-activo {


transform: scale(1.45);


}

.zoom-indicador {


position: absolute;

left: 50%;

bottom: 5px;

transform: translateX(-50%);

padding: 5px 9px;

background: rgba(17, 17, 17, 0.82);

color: #fff;

border-radius: 20px;

font-size: 9px;

opacity: 0;

transition: opacity 0.25s ease;

pointer-events: none;

white-space: nowrap;


}

.imagen-card:hover .zoom-indicador {


opacity: 1;


}

.imagen-sin-producto {


color: #999;

font-size: 14px;


}

/* ============================================================
CONFIANZA DEBAJO DE IMAGEN
============================================================ */

.imagen-confianza {


width: 100%;

display: flex;

flex-direction: column;

gap: 6px;

margin-top: 12px;

padding: 11px 13px;

border: 1px solid #e9e9e9;

border-radius: 10px;

background: #fff;

box-sizing: border-box;


}

.confianza-item {


display: flex;

align-items: center;

gap: 8px;

color: #555;

font-size: 11px;


}

.confianza-icono {


width: 17px;

height: 17px;

display: flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background: #d4af37;

color: #111;

font-size: 10px;

font-weight: 900;


}

/* ============================================================
DETALLES
============================================================ */

.col-detalles {


display: flex;

flex-direction: column;

min-width: 0;


}

/* ============================================================
HEADER
============================================================ */

.producto-header {


margin-bottom: 18px;


}

.producto-etiqueta {


display: inline-block;

font-size: 10px;

font-weight: 800;

letter-spacing: 1.7px;

color: #a27b00;

margin-bottom: 8px;


}

.col-detalles h1 {


margin: 0;

font-size: 31px;

line-height: 1.18;

color: #111;

font-weight: 800;

letter-spacing: -0.8px;


}

.producto-subinfo {


display: flex;

flex-wrap: wrap;

gap: 8px;

margin-top: 12px;


}

.producto-subinfo span {


padding: 5px 9px;

border-radius: 20px;

background: #faf7ec;

border: 1px solid #eee3bb;

color: #6e5a19;

font-size: 10px;

font-weight: 600;


}

/* ============================================================
DESCRIPCIÓN
============================================================ */

.descripcion-wrapper {


margin-bottom: 22px;

border: 1px solid #e8e8e8;

border-radius: 12px;

background: #fafafa;

overflow: hidden;


}

.descripcion-titulo {


padding: 10px 14px;

font-size: 11px;

font-weight: 800;

color: #333;

text-transform: uppercase;

letter-spacing: 0.8px;

background: #f5f5f5;

border-bottom: 1px solid #e8e8e8;


}

.producto-descripcion {


font-size: 14px;

color: #555;

line-height: 1.65;

max-height: 155px;

overflow-y: auto;

padding: 13px 15px;

margin: 0;

box-sizing: border-box;


}

.producto-descripcion::-webkit-scrollbar {


width: 5px;


}

.producto-descripcion::-webkit-scrollbar-track {


background: transparent;


}

.producto-descripcion::-webkit-scrollbar-thumb {


background: #d2d2d2;

border-radius: 10px;


}

/* ============================================================
AVISO MEDIOS DE PAGO
============================================================ */

.aviso-medios-pago {


display: flex;

align-items: center;

gap: 13px;

margin: 0 0 25px;

padding: 14px 16px;

background:
    linear-gradient(
        135deg,
        #fafcfb 0%,
        #ffffff 100%
    );

border: 1px solid #dbe3ea;

border-left: 4px solid #d4af37;

border-radius: 10px;

box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.035);


}

.aviso-medios-icono {


width: 40px;

height: 40px;

flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

background: #faf7ec;

border: 1px solid #eee3bb;

border-radius: 50%;

font-size: 19px;


}

.aviso-medios-contenido {


display: flex;

flex-direction: column;

gap: 3px;

line-height: 1.35;


}

.aviso-medios-contenido strong {


color: #1f2937;

font-size: 13px;

font-weight: 700;


}

.aviso-medios-contenido span {


color: #64748b;

font-size: 11px;


}

.aviso-medios-contenido .aviso-descuento {


display: inline-flex;

width: fit-content;

margin-top: 3px;

padding: 3px 8px;

background: #f7edc7;

color: #765d0d;

border-radius: 5px;

font-size: 10px;

font-weight: 800;


}

/* ============================================================
SECCIONES
============================================================ */

.seccion-opciones {


margin-bottom: 24px;


}

.label-seccion {


display: flex;

align-items: center;

gap: 9px;

font-size: 13px;

font-weight: 800;

color: #181818;

margin-bottom: 11px;


}

.numero-seccion {


width: 24px;

height: 24px;

display: inline-flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

background: #111;

color: #d4af37;

border-radius: 50%;

font-size: 11px;

font-weight: 800;


}

/* ============================================================
GRILLA
============================================================ */

.opciones-tamaño,
.opciones-presentacion {


display: grid;

grid-template-columns:
    repeat(
        auto-fill,
        minmax(155px, 1fr)
    );

gap: 9px;

margin: 0;


}

/* ============================================================
RADIO
============================================================ */

.radio-item {


position: relative;


}

.radio-item input[type="radio"] {


position: absolute;

opacity: 0;

pointer-events: none;


}

/* ============================================================
TARJETAS
============================================================ */

.radio-item label {


position: relative;

display: flex;

align-items: center;

min-height: 67px;

padding: 10px 12px;

border: 1px solid #dedede;

border-radius: 10px;

background: #fff;

cursor: pointer;

transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;

box-sizing: border-box;


}

.radio-item label:hover {


border-color: #d4af37;

background: #fffdf7;

transform: translateY(-1px);

box-shadow:
    0 3px 10px rgba(212, 175, 55, 0.08);


}

.radio-item input[type="radio"]:checked + label {


border: 2px solid #d4af37;

background: #fffdf3;

box-shadow:
    0 4px 14px rgba(212, 175, 55, 0.14);


}

.radio-check {


width: 16px;

height: 16px;

border: 1.5px solid #c9c9c9;

border-radius: 50%;

margin-right: 10px;

flex-shrink: 0;

position: relative;

box-sizing: border-box;


}

.radio-item input[type="radio"]:checked + label .radio-check {


border-color: #d4af37;


}

.radio-item input[type="radio"]:checked + label .radio-check::after {


content: "";

position: absolute;

width: 7px;

height: 7px;

background: #d4af37;

border-radius: 50%;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);


}

/* ============================================================
CONTENIDO OPCIÓN
============================================================ */

.talla-contenido {


display: flex;

flex-direction: column;

min-width: 0;

flex: 1;


}

.talla-texto {


color: #292929;

font-size: 12px;

font-weight: 600;

line-height: 1.35;


}

.talla-texto small {


display: block;

margin-top: 2px;

font-size: 10px;

color: #777;

font-weight: 500;


}

.talla-precio {


display: block;

margin-top: 4px;

color: #111;

font-size: 12px;

font-weight: 800;


}

.sin-opciones {


grid-column: 1 / -1;

padding: 12px;

border-radius: 8px;

background: #f7f7f7;

color: #777;

font-size: 12px;

text-align: center;


}

/* ============================================================
CARD DE COMPRA
============================================================ */

.col-compra {


display: flex;

flex-direction: column;


}

.caja-compra-card {


position: sticky;

top: 25px;

border: 1px solid #dedede;

border-radius: 14px;

padding: 20px;

background: #fff;

box-shadow:
    0 7px 25px rgba(0, 0, 0, 0.05);

box-sizing: border-box;


}

.compra-card-titulo {


margin-bottom: 18px;

padding-bottom: 12px;

border-bottom: 1px solid #eeeeee;

color: #111;

font-size: 16px;

font-weight: 800;


}

/* ============================================================
CANTIDAD
============================================================ */

.cantidad-container {


display: flex;

flex-direction: column;

gap: 8px;

margin-bottom: 18px;


}

.label-cantidad {


font-weight: 700;

font-size: 12px;

color: #333;


}

.input-cantidad-wrapper {


display: inline-flex;

align-items: center;

border: 1px solid #d1d5db;

border-radius: 8px;

overflow: hidden;

background: #fff;

width: fit-content;


}

.input-cantidad {


width: 50px;

text-align: center;

border: none;

outline: none;

font-size: 15px;

font-weight: 700;

color: #111;

background: transparent;

padding: 8px 0;


}

.input-cantidad::-webkit-inner-spin-button,
.input-cantidad::-webkit-outer-spin-button {


-webkit-appearance: none;

margin: 0;


}

.input-cantidad {


-moz-appearance: textfield;


}

.btn-cantidad-control {


width: 38px;

height: 38px;

background: #fafafa;

border: none;

color: #333;

cursor: pointer;

font-weight: 700;

font-size: 17px;

transition:
    background 0.2s ease,
    color 0.2s ease;


}

.btn-cantidad-control:hover {


background: #f7edc7;

color: #765d0d;


}

.btn-cantidad-control:active {


background: #eee3bb;


}

/* ============================================================
PRECIO
============================================================ */

.precio-destacado {


margin-bottom: 17px;

padding: 16px;

border: 1px solid #e5e5e5;

border-radius: 11px;

background: #fff;

box-sizing: border-box;


}

.precio-mp {


padding-bottom: 13px;

border-bottom: 1px solid #eeeeee;


}

.precio-mp-label {


display: block;

font-size: 11px;

color: #666;

font-weight: 600;

margin-bottom: 5px;


}

.precio-container {


display: flex;

align-items: baseline;

gap: 5px;

line-height: 1;


}

.precio-destacado .moneda {


font-size: 11px;

color: #666;

font-weight: 700;


}

.precio-principal {


font-size: 30px;

font-weight: 800;

color: #111;

letter-spacing: -0.7px;


}

.precio-referencia {


display: block;

margin-top: 7px;

color: #888;

font-size: 10px;


}

/* ============================================================
DESCUENTO
============================================================ */

.precio-descuento {


display: flex;

align-items: center;

gap: 10px;

margin-top: 13px;

padding: 10px 11px;

background: #faf7ec;

border-radius: 8px;

border: 1px solid #eee3bb;


}

.descuento-icono {


width: 26px;

height: 26px;

display: flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background: #d4af37;

color: #111;

font-size: 12px;

font-weight: 900;


}

.descuento-texto {


display: flex;

flex-direction: column;

gap: 2px;

line-height: 1.25;


}

.descuento-texto strong {


font-size: 13px;

color: #765d0d;

font-weight: 800;


}

.descuento-texto span {


font-size: 10px;

color: #555;


}

/* ============================================================
TRANSFERENCIA
============================================================ */

.precio-transferencia {


display: flex;

align-items: center;

justify-content: space-between;

gap: 10px;

margin-top: 13px;

padding-top: 12px;

border-top: 1px solid #eeeeee;


}

.precio-transferencia span {


font-size: 11px;

color: #555;

font-weight: 500;


}

.precio-transferencia strong {


font-size: 17px;

color: #2e7d32;

font-weight: 800;

white-space: nowrap;


}

/* ============================================================
DESGLOSE
============================================================ */

.desglose-precio {


margin-top: 11px;

padding-top: 10px;

border-top: 1px dashed #ddd;

font-size: 10px;

color: #666;

text-align: center;

line-height: 1.4;


}

/* ============================================================
BENEFICIOS
============================================================ */

.compra-beneficios {


display: flex;

flex-direction: column;

gap: 8px;

margin-bottom: 18px;


}

.beneficio-item {


display: flex;

align-items: center;

gap: 8px;


}

.beneficio-item > span {


width: 18px;

height: 18px;

display: flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

border-radius: 50%;

background: #f7edc7;

color: #765d0d;

font-size: 10px;

font-weight: 900;


}

.beneficio-item p {


margin: 0;

color: #555;

font-size: 10px;

line-height: 1.3;


}

/* ============================================================
ENVÍO
============================================================ */

.envio-info {


font-size: 0.85rem;

color: #2e7d32;

margin-bottom: 20px;

background: rgba(46, 125, 50, 0.05);

padding: 10px;

border-radius: 6px;


}

.envio-info p {


margin: 0;


}

/* ============================================================
BOTÓN
============================================================ */

.acciones-compra {


display: flex;

flex-direction: column;

gap: 12px;


}

.btn-agregar-carrito {


display: flex;

align-items: center;

justify-content: center;

gap: 10px;

width: 100%;

min-height: 48px;

background: #d4af37;

border: 2px solid #d4af37;

border-radius: 9px;

padding: 12px 15px;

font-size: 0.84rem;

cursor: pointer;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.3px;

transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;

color: #111;


}

.btn-agregar-carrito:hover {


background: #c19b27;

border-color: #c19b27;

transform: translateY(-2px);

box-shadow:
    0 7px 20px rgba(212, 175, 55, 0.25);


}

.btn-flecha {


font-size: 18px;

line-height: 1;

transition:
    transform 0.2s ease;

}

.btn-agregar-carrito:hover .btn-flecha {


transform: translateX(3px);


}

.btn-agregar-carrito.boton-deshabilitado,
.btn-agregar-carrito:disabled {


opacity: 0.5;

cursor: not-allowed;

transform: none;

box-shadow: none;


}

.compra-ayuda {


margin: 12px 0 0;

text-align: center;

color: #777;

font-size: 10px;

line-height: 1.4;


}

.compra-ayuda strong {


color: #765d0d;


}

/* ============================================================
TABLET
============================================================ */

@media (max-width: 1150px) {


.producto-container-amazon {

    grid-template-columns:
        290px
        minmax(0, 1fr)
        275px;

    gap: 25px;

    padding: 27px;
}


.imagen-card {

    min-height: 350px;

    padding: 20px;
}


.imagen-wrapper {

    min-height: 300px;
}


.img-principal {

    height: 300px;
}


.col-detalles h1 {

    font-size: 27px;
}


}

/* ============================================================
TABLET PEQUEÑA
============================================================ */

@media (max-width: 950px) {


.producto-page {

    padding: 25px 14px;
}


.producto-container-amazon {

    grid-template-columns:
        300px
        minmax(0, 1fr);

    gap: 25px;

    padding: 25px;
}


.col-compra {

    grid-column: 1 / -1;

    width: 100%;
}


.caja-compra-card {

    position: static;

    max-width: 650px;

    margin: 0 auto;

    width: 100%;
}


}

/* ============================================================
MÓVIL
============================================================ */

@media (max-width: 700px) {


.producto-page {

    padding: 15px 8px;
}


.producto-container-amazon {

    grid-template-columns: 1fr;

    padding: 17px;

    gap: 22px;

    border-radius: 14px;
}


.col-imagen {

    position: static;

    width: 100%;
}


.imagen-card {

    min-height: 310px;

    max-width: 520px;

    margin: 0 auto;

    padding: 18px;
}


.imagen-wrapper {

    min-height: 270px;
}


.img-principal {

    height: 270px;
}


.img-principal.imagen-zoom-activo {

    transform: scale(1.15);
}


.zoom-indicador {

    display: none;
}


.producto-header {

    margin-bottom: 15px;
}


.col-detalles h1 {

    font-size: 24px;

    letter-spacing: -0.4px;
}


.producto-subinfo {

    gap: 6px;
}


.aviso-medios-pago {

    margin-bottom: 20px;

    padding: 12px;

    gap: 10px;
}


.aviso-medios-icono {

    width: 35px;

    height: 35px;

    font-size: 17px;
}


.aviso-medios-contenido strong {

    font-size: 12px;
}


.aviso-medios-contenido span {

    font-size: 10px;
}


.opciones-tamaño,
.opciones-presentacion {

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


.radio-item label {

    min-height: 63px;

    padding: 9px 10px;
}


.talla-texto {

    font-size: 11px;
}


.talla-precio {

    font-size: 11px;
}


.caja-compra-card {

    padding: 17px;
}


}

/* ============================================================
MÓVIL PEQUEÑO
============================================================ */

@media (max-width: 480px) {


.producto-page {

    padding: 9px 6px;
}


.producto-container-amazon {

    padding: 13px;

    gap: 19px;

    border-radius: 11px;
}


.imagen-card {

    min-height: 270px;

    padding: 14px;
}


.imagen-wrapper {

    min-height: 235px;
}


.img-principal {

    height: 235px;
}


.imagen-badge {

    top: 10px;

    left: 10px;

    font-size: 8px;
}


.imagen-confianza {

    padding: 9px 10px;
}


.col-detalles h1 {

    font-size: 21px;
}


.producto-etiqueta {

    font-size: 8px;

    letter-spacing: 1.4px;
}


.producto-subinfo span {

    font-size: 9px;

    padding: 4px 7px;
}


.producto-descripcion {

    font-size: 13px;

    max-height: 175px;

    padding: 12px;
}


.opciones-tamaño,
.opciones-presentacion {

    grid-template-columns: 1fr;
}


.radio-item label {

    min-height: 59px;
}


.label-seccion {

    font-size: 12px;
}


.numero-seccion {

    width: 22px;

    height: 22px;

    font-size: 10px;
}


.precio-principal {

    font-size: 27px;
}


.precio-transferencia strong {

    font-size: 16px;
}


.btn-agregar-carrito {

    min-height: 50px;

    font-size: 0.78rem;
}

}

/* ============================================================
REDUCCIÓN DE MOVIMIENTO
============================================================ */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
}


}