/* Font Face Declarations */
@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/MinionPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Minion Pro";
  src: url("../fonts/MinionPro-It.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Garamond Pro";
  src: url("../fonts/AGaramondPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Garamond Pro";
  src: url("../fonts/AGaramondPro-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --skyblue: #b6c9c3;
  --sage-olive: #8d8c60;
  --warm-cream: #efe6da;
  --sage-cream: #d0cca6;
  --cream: #E9D4AB;
  --transition_3s: all 0.3s ease-in-out;
}

body{
  color: var(--sage-olive);
}

/* Utility Classes */
.font-minion-pro {
  font-family: "Minion Pro", serif;
}
.font-minion-pro-italic {
  font-family: "Minion Pro", serif;
  font-style: italic;
}
.font-garamond-pro {
  font-family: "Adobe Garamond Pro", serif;
}
.font-garamond-pro-bold {
  font-family: "Adobe Garamond Pro", serif;
  font-weight: bold;
}

.bg-skyblue {
  background-color: var(--skyblue);
}
.bg-sage-olive {
  background-color: var(--sage-olive);
}
.bg-warm-cream {
  background-color: var(--warm-cream);
}
.bg-sage-cream {
  background-color: var(--sage-cream);
}
.bg-cream{
  background-color: var(--cream);
}

.text-sage-olive {
  color: var(--sage-olive);
}
.text-warm-cream {
  color: var(--warm-cream);
}
.text-sage-cream {
  color: var(--sage-cream);
}

/* navbar */
#navbar .navbar-brand {
  padding: 10px 0;
}

#navbar .navbar-brand img {
  width: 200px;
}

#navbar .offcanvas {
  flex-grow: unset;
  font-style: italic;
}

#navbar .offcanvas a {
  padding: 5px 12px !important;
  font-family: "Adobe Garamond Pro";
  font-size: 18px;
  font-weight: 500;
  color: #5e6e58;
}

#navbar .offcanvas a.active,
#navbar .offcanvas a:hover {
  background-color: var(--sage-olive);
  color: var(--bs-white);
}

.nav-btns button {
  background: none;
  outline: none;
  border: none;
}

.nav-btns button img {
  height: 24px;
}

.nav-select {
  border: none;
}

.search-box {
  position: relative;
}

.search-box input {
  padding: 8px 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 35px;
  border: none;
  outline: none;
  opacity: 0;
  border: 1px solid #bebebe;
  border-radius: 100px;
  transition: width 0.3s ease, opacity 0.3s ease;
  -webkit-transition: width 0.3s ease, opacity 0.3s ease;
  -moz-transition: width 0.3s ease, opacity 0.3s ease;
  -ms-transition: width 0.3s ease, opacity 0.3s ease;
  -o-transition: width 0.3s ease, opacity 0.3s ease;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.search-box.active input {
  opacity: 1;
}
.search-box button {
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
}

.nav-m-search{
    gap: .5rem;
    padding: 8px 12px;
    border: 1px solid var(--sage-olive);
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

.nav-m-search input{
    width: 100%;
    border: none;
    outline: none;
}

.video-container video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horizontal-text{
  width: 31%;
}

.horizontal-text img{
  width: 100%;
}

.horizontal-content{
  width: 69%;
}

.horizontal-content .img{
  width: 120%;
  margin-left: -20%;
}

.lt-1{
  letter-spacing: 2px;
}

.text_space_5 {
    letter-spacing: 5px;
}

.footer_bg {
    background: #F1BFAE;
}

.bg-sage-olive .font-minion-pro img + h4 { text-align: justify; }
.horizontal-content p { text-align: justify; }
.bg-sage-cream p.h5 { text-align: justify; }
.bg-skyblue .text-white,
.bg-cream  .text-white { color: #fff !important; }


/* Navbar fijo + animación de ocultar/mostrar al hacer scroll */
#navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;             /* ancho completo */
  z-index: 1030;        /* por encima del contenido */
  transform: translateY(0);
  transition: transform .3s ease-in-out;
  will-change: transform;
  background: #fff;     /* o quítalo si tu navbar ya tiene fondo sólido */
}

#navbar.hidden{
  transform: translateY(-100%);
}

/* Para que el contenido no quede tapado por el navbar fijo.
   Ajusta 120px a la altura real de tu navbar si hace falta. */
body{ padding-top: 120px; }



/* Fondo y color del panel offcanvas (menú móvil) */
#offcanvasNavbar{
  --bs-offcanvas-bg: #fff;
  --bs-offcanvas-color: var(--sage-olive);
  background-color: #fff; /* por si algún navegador ignora la variable */
}
/* ===== Texto centrado sobre imagen ===== */
.hero-figure{ position: relative; }
.hero-figure > img{ display:block; width:100%; height:auto; }

.hero-caption{ position:absolute; inset:0; pointer-events:none; }

/* Caja que contiene las dos líneas: centrada en X e Y */
.hero-caption .stack{
  position:absolute;
  left:50%; top:50%;
  /* Ajusta la vertical con --hero-offset si quieres subir/bajar el bloque */
  transform: translate(-50%, calc(-50% + var(--hero-offset, 0)));
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  text-align:center;
}

.hero-caption .line1{
  display:block;
  font-size:clamp(18px, 2.6vw, 40px);
  letter-spacing:.35em;
  text-transform:uppercase;
  color:#ece9d7;                 /* o #f0e6db */
  text-shadow:0 2px 8px rgb(0 0 0 / .35);
}

.hero-caption .line2{
  display:block;
  font-size:clamp(16px, 2vw, 32px);
  font-style:italic;
  color:#fff;                 /* o #f0e6db */
  text-shadow:0 2px 8px rgb(0 0 0 / .35);
}

:root{ --nav-h: 120px; }    /* valor de reserva */
body{ padding-top: var(--nav-h); }

/* Mantener la primera línea del hero en una sola línea */
.hero-caption .line1{
  white-space: nowrap;
}

/* (Opcional) Ajustes para que quepa en móviles muy estrechos */
@media (max-width: 768px){
  .hero-caption .line1{ letter-spacing: .25em; }
}
@media (max-width: 480px){
  .hero-caption .line1{
    font-size: clamp(16px, 5.5vw, 28px);
    letter-spacing: .2em;
  }
}

/* --- Zoom suave en las imágenes de producto --- */
.py-3.text-center.bg-warm-cream { 
  overflow: hidden;                /* recorta el zoom a la tarjeta */
}

.py-3.text-center.bg-warm-cream > img {
  transform: scale(1);
  transition: transform .45s ease;
  will-change: transform;
}

/* Hover real (ratón) */
@media (hover: hover) and (pointer: fine){
  .py-3.text-center.bg-warm-cream:hover > img {
    transform: scale(1.06);        /* ajusta 1.03–1.1 a tu gusto */
  }
}

/* Accesible: al enfocar con teclado si hay enlaces dentro */
.py-3.text-center.bg-warm-cream:focus-within > img {
  transform: scale(1.06);
}

/* Si alguien tiene reducir animaciones activo */
@media (prefers-reduced-motion: reduce){
  .py-3.text-center.bg-warm-cream > img { transition: none; }
}
@media (hover: hover) and (pointer: fine){
  .py-3.text-center.bg-warm-cream:hover{
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
}
/* Radio en las cajas para toda la web */
.py-3.text-center.bg-warm-cream{
  border-radius:16px;
  overflow:hidden;
}

/* Forzar columnas a igual altura en las filas marcadas como .equal */
.page-albumes .row.equal > [class*="col-"]{ display:flex; }
.page-albumes .row.equal > [class*="col-"] > *{ width:100%; }

/* Imagen grande a toda la altura con esquinas redondeadas */
.album-feature{
  position:relative;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  background:#efe8db; /* color de base por si tarda la imagen */
}
.album-feature > img{
  width:100%;
  height:100%;
  object-fit:cover;      /* rellena toda la caja */
  display:block;
}

/* Etiqueta dentro de la imagen, pegada abajo y centrada */
.album-feature__label{
font-size:32px;
  position:absolute;
  left:0; right:0; top:0;
  padding:14px 18px;
  text-align:center;
  color:#f0e6db;                   /* crema de marca */
  letter-spacing:.25em;
  text-transform:uppercase;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0)); /* mejora legibilidad */
  pointer-events:none;
}
/* Reducir SOLO aquí el espacio entre "WELCOME TO" y el logo, y ajustar interlineado */
.welcome-block h4.text-center{
  margin-bottom: .25rem !important;  /* antes: .mb-4 = 1.5rem */
  line-height: 1;                    /* más “cerrado” como la referencia */
}

/* Reducir el espacio bajo el logo (la imagen tiene .mb-4) */
.welcome-block img.mb-4{
  margin-bottom: .75rem !important;  /* ajústalo: .5rem, .75rem, etc. */
}

/* (Opcional) Acercar un poco el siguiente párrafo si lo ves muy separado */
.welcome-block img + h4{
  margin-top: .25rem;                /* por defecto suele ser 0; aquí forzamos poco gap */
}
/* Subir tamaño del párrafo PREMIUM */
.horizontal-content p{
  font-size: 1.3rem;   /* ≈18px */
  line-height: 1.4;
}

/* Limitar tamaño de la imagen del bloque PREMIUM */
.horizontal-content .img{
  max-width: 420px;   /* ajusta 360–480px a tu gusto */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem; /* centrada */
}

/* Limitar el logo vertical (logo-3.svg) del lado izquierdo */
.horizontal-text img{
  max-width: 160px;   /* ajusta si lo ves grande */
  height: auto;
}

/* Por si acaso, evita “choques” en pantallas estrechas */
@media (max-width: 1200px){
  .bg-warm-cream .d-flex.align-items-center.gap-5.p-4.pe-5{
    flex-wrap: wrap;           /* se apilan sin solaparse */
    gap: 1.5rem;
  }
}
/* ===== Bloque PREMIUM responsive: logo a la izda + imagen a la dcha ===== */
@media (max-width: 991.98px){ /* móvil / tablet vertical */
  .bg-warm-cream .d-flex.align-items-center.gap-5.p-4.pe-5{
    flex-wrap: nowrap !important;   /* anulamos el wrap anterior */
    gap: 1rem;
  }
  .bg-warm-cream .horizontal-text{   /* columna del logo */
    flex: 0 0 34%;
    max-width: 34%;
  }
  .bg-warm-cream .horizontal-text img{
    width: 100%; height: auto; display: block;
  }
  .bg-warm-cream .horizontal-content{ /* columna de la imagen */
    flex: 1 1 66%;
    max-width: 66%;
  }
  .bg-warm-cream .horizontal-content .img{
    max-width: 100%; height: auto; display: block;
  }
}

/* Ajuste fino en móviles muy estrechos */
@media (max-width: 575.98px){
  .bg-warm-cream .horizontal-text{ flex-basis: 38%; max-width: 38%; }
  .bg-warm-cream .horizontal-content{ flex-basis: 62%; max-width: 62%; }
}
/* QS: pegar los dos H2 y ajustar el párrafo */
.bg-sage-cream .text-sage-olive.font-garamond-pro h2{
  margin-bottom: .2rem !important;
  line-height: 1;
}
.bg-sage-cream .text-sage-olive.font-garamond-pro h2 + h2{
  margin-top: 0;
  margin-bottom: .6rem !important;
  line-height: 1;
}

/* Párrafo con ancho cómodo y justificado (aprox. como el título) */
.bg-sage-cream .text-sage-olive.font-garamond-pro p.h5{
  max-width: 31ch;   /* ajusta 40–50ch a tu gusto */
  text-align: justify;
}
/* Más aire entre columnas solo en esa fila, en escritorio */
@media (min-width: 1200px){
  .page-albumes .albums-baby{ --bs-gutter-x: 4rem; } /* aumenta el gap horizontal de Bootstrap */
}

/* Texto del bloque derecho (párrafo largo) */
.page-albumes .albums-baby p.h5{
  text-align: justify;
  font-size: 1.3rem;   /* ≈18px */
  line-height: 1.6;
}

/* ===== Copias (imágenes redondeadas + textos) ===== */
.copies-section .copy-card{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f2ede4;          /* tono crema de base */
}
.copies-section .copy-card img{
  display:block; width:100%; height:auto; object-fit:cover;
}
.copies-section .copies-body{
  text-align: justify;
  font-size: 1.3rem;          /* ≈18px */
  line-height: 1.4;
  max-width: 48ch;              /* ancho cómodo de lectura */
  margin: 0 auto;               /* centrado bajo el título */
}

/* Ajustes responsive: en móvil se apilan (ya lo hace Bootstrap), 
   y afinamos espacios para que respiren */
@media (max-width: 575.98px){
  .copies-section .copies-body{ max-width: 52ch; }
}


/* Tarjeta con imagen redondeada y vídeo en hover */
.copy-card{
  position:relative;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#f2ede4;
  aspect-ratio: 4 / 5;             /* ajusta si tus fotos tienen otra proporción */
}
.copy-card > img,
.copy-card > .hover-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.copy-card > .hover-video{
  opacity:0;
  transition: opacity .25s ease;
}

/* Solo mostrar el vídeo al pasar el ratón (y al enfocar con teclado) */
@media (hover: hover) and (pointer: fine){
  .copy-card:hover > .hover-video{ opacity:1; }
}
.copy-card:focus-within > .hover-video{ opacity:1; }

/* Texto de los párrafos (como dejamos antes) */
.copies-body{
  text-align: justify;
  font-size: 1.125rem;
  line-height: 1.9;
  max-width: 48ch;
  margin: 0 auto;
}


/* ===== Ticker sin cortes ===== */
.ticker{ position:relative; overflow:hidden; }
.ticker__track{
  display:flex;                    /* evita huecos entre copias */
  width:max-content;               /* ancho natural del contenido */
  will-change:transform;
  animation: ticker-loop 24s linear infinite;
}
.ticker__item{
  flex:0 0 auto;
  padding: 0 2.5rem;               /* separación entre copias */
  white-space:nowrap;
}
@keyframes ticker-loop{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-25%,0,0); } /* 4 copias -> desplazamos 25% */
}

/* (Opcional) pausa al pasar el ratón */
.ticker:hover .ticker__track{ animation-play-state: paused; }

/* Anti-jank: si quieres aún más suavidad, sube la duración (35–45s) */


/* Álbumes: justificar y mejorar legibilidad del texto largo */
.page-albumes .text-sage-olive.font-minion-pro p.h5{
  text-align: justify;
  font-size: 1.125rem;   /* ≈18px */
  line-height: 1.9;
  hyphens: auto;         /* cortes de palabra automáticos (lang="es" ya ayuda) */
}



/* ===== Layout toggles (elige uno u otro poniendo la clase en <body>) ===== */

/* Ajusta aquí el ancho máximo deseado de la versión “limitada” */
:root{ --site-max: 1400px; }   /* o prueba 1200px, o 80vw */

/* A) Versión ANCHO LIMITADO (contenidos centrados) */
body.layout-fixed [class*="container-"]{
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
}

/* Excepciones a ancho completo dentro de la versión limitada:
   añade class="full-bleed" a la section que quieras 100% */
body.layout-fixed .full-bleed,
body.layout-fixed .full-bleed > [class*="container-"]{
  max-width: none;
}

/* B) Versión ANCHO COMPLETO (todo fluido, sin límites de Bootstrap) */
body.layout-fluid .container,
body.layout-fluid .container-sm,
body.layout-fluid .container-md,
body.layout-fluid .container-lg,
body.layout-fluid .container-xl,
body.layout-fluid .container-xxl{
  max-width: 100%;
}

/* (Opcional) si quieres que NADA deje “marcos” laterales en la versión fluida: */
body.layout-fluid .container,
body.layout-fluid .container-fluid{
  padding-left: 0;
  padding-right: 0;
}
/* Reducir altura del footer que viene con .footer_bg y .py-5 */
.footer_bg.py-5{
  padding-top: 1rem !important;   /* antes: 3rem */
  padding-bottom: 1rem !important; /* antes: 3rem */
}
/* Etiquetas sobre las imágenes sin sombreado ni degradado */
.album-feature__label{
  background: none !important;
  text-shadow: none !important;
  color: #8D8C60;          /* verde marca; cambia si prefieres otro */
  padding: .75rem 1rem;    /* deja el texto con un pelín de aire */
}
/* Footer: tamaño uniforme y 20% más pequeño */
.footer_bg{ font-size: .9rem; }                 /* ~20% menor que 1rem */

/* Anula tamaños de utilidades dentro del footer para que hereden .8rem */
.footer_bg .fs-1, .footer_bg .fs-2, .footer_bg .fs-3,
.footer_bg .fs-4, .footer_bg .fs-5, .footer_bg .fs-6,
.footer_bg .h1,  .footer_bg .h2,  .footer_bg .h3,
.footer_bg .h4,  .footer_bg .h5,  .footer_bg .h6,
.footer_bg h1,   .footer_bg h2,   .footer_bg h3,
.footer_bg h4,   .footer_bg h5,   .footer_bg h6{
  font-size: inherit !important;
  line-height: 1.4;
}
.footer_bg p, .footer_bg a, .footer_bg li{ font-size: inherit; }

/* ===== Pantalla de elección PREMIUM / BASIC ===== */
.select-model .option-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #f2ede4;        /* crema suave, como en copias.html */
  aspect-ratio: 3 / 4;        /* imagen vertical; ajusta si quieres */
}
.select-model .option-card > img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* sello sobre la imagen */
.select-model .option-card .stamp{
  position: absolute; top: 14px; left: 14px;
  width: 72px; height: auto; pointer-events: none;
}
.select-model .option-card .stamp-right{ left: auto; right: 14px; }

/* “PREMIUM / BASIC” con marco al ancho del párrafo */
.select-model .option-badge{
  display: block;
  width: min(48ch, 100%);
  margin: 14px auto 8px;
  padding: 8px 14px;
  border: 1px solid #8D8C60;
  text-align: center;
  text-decoration: none;
  color: #8D8C60;
  text-transform: uppercase;
  letter-spacing: .35em;
  font-family: "Adobe Garamond Pro", Garamond, serif; /* a juego con la web */
}

/* cuerpo del texto: justificado y mismo ancho que el marco */
.select-model .option-body{
  width: min(48ch, 100%);
  margin: 0 auto;
  text-align: justify;
  line-height: 1.9;
  font-size: 1.125rem;  /* ≈18px */
}

/* línea de enlace con precio, centrada */
.select-model .option-cta{
  text-align: center;
  margin: 10px 0 0;
}
.select-model .option-cta .nowrap{ white-space: nowrap; }

/* Responsive fino */
@media (max-width: 575.98px){
  .select-model .option-card{ aspect-ratio: 4 / 5; }
  .select-model .option-badge,
  .select-model .option-body{ width: min(52ch, 100%); }
}
/* PREMIUM / BASIC: más peso, un poco más grandes y borde más grueso */
.select-model .option-badge{
  font-weight: 700;          /* más “gorditas” */
  font-size: 1.05rem;        /* un pelín más grandes */
  border: 2px solid #8D8C60; /* borde más grueso */
  padding: 10px 16px;        /* reequilibra el aire del marco */
}
/* Igualar alturas de las dos columnas y pegar el CTA abajo */
.select-model .row.g-5{ align-items: stretch !important; } /* ambas columnas misma altura */
.select-model .col-md-6{
  display: flex;
  flex-direction: column;
  align-items: center;  /* mantiene imagen, marco y texto centrados */
}

.select-model .option-cta{
  margin-top: auto;     /* empuja el CTA al fondo de cada columna */
  padding-top: 12px;
}

/* En móvil, que el CTA siga al contenido sin “huecos” */
@media (max-width: 767.98px){
  .select-model .col-md-6{ align-items: stretch; }
  .select-model .option-cta{ margin-top: 10px; }
}
/* ========= PRODUCT PAGE ========= */
:root{ --sage:#8D8C60; --cream:#f2ede4; }

.product-page .product-gallery{
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
}
.product-page .thumb{
  border: 1px solid rgba(0,0,0,.08);
  padding: 4px; border-radius: 10px; background:#fff;
  width: 64px; height: 64px; display: grid; place-items:center;
}
.product-page .thumb img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.product-page .thumb.active{ outline:2px solid var(--sage); outline-offset:2px; }

.product-page .main{
  position: relative; border-radius: 18px; overflow: hidden;
  background: var(--cream); min-height: 420px;
}
.product-page .main .main-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.product-page .main .stamp{
  position:absolute; left:14px; top:14px; width:74px; height:auto; pointer-events:none;
}

/* info */
.product-page .feature-box{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.5rem .75rem; border:1px solid var(--sage); border-radius:8px; color:var(--sage);
}
.product-page .badge-icon{ line-height:1; font-size:1rem; }

/* Tamaños */
.size-opt{
  border:1px solid var(--sage); border-radius:8px; background:#fff;
  padding:.55rem .8rem; min-width:160px; text-align:center; color:var(--sage);
}
.size-opt small{ display:block; font-size:.8rem; opacity:.85; }
.size-opt.selected{ border-width:2px; box-shadow:0 0 0 2px rgba(141,140,96,.15) inset; }

/* Swatches */
.swatch{
  width:34px; height:34px; border-radius:999px; background:var(--c);
  border:1px solid rgba(0,0,0,.15);
}
.swatch.selected{ outline:2px solid var(--sage); outline-offset:2px; }

/* Botón principal */
.btn-personalize{
  display:block; width:100%; max-width:420px;
  background:#cfc8a0; color:#fff; border:0; padding:.9rem 1.2rem;
  letter-spacing:.35em; text-transform:uppercase; border-radius:6px;
  margin-left:0;
}

/* Acordeón */
.product-accordion .acc-toggle{
  width:100%; text-align:left; border:0; background:#fff;
  border-top:1px solid rgba(0,0,0,.1); padding:1rem .5rem;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--sage); font-weight:600;
}
.product-accordion .acc-toggle:first-of-type{ margin-top:.25rem; }
.product-accordion .acc-panel{
  display:none; padding:0 .5rem 1rem;
}
.product-accordion .acc-toggle.open + .acc-panel{ display:block; }
.product-accordion .acc-toggle.open .acc-sign{ transform:rotate(45deg); }

/* Responsive: miniaturas abajo en móvil (ya en el HTML),
   aquí solo ajustamos columnas cuando no hay espacio */
@media (max-width: 991.98px){
  .product-page .product-gallery{ grid-template-columns: 1fr; }
  .product-page .thumb{ width:56px; height:56px; }
  .product-page .main{ min-height: 360px; }
}

/* Altura controlada de la imagen grande del producto */
:root{ --product-main-h: 760px; } /* ajusta aquí: 320–400px según te guste */

.product-page .main{
  height: var(--product-main-h) !important;
  min-height: 0 !important;                 /* anula el min-height anterior */
}

/* En tablets/móvil puedes bajarla un poco más si quieres */
@media (max-width: 991.98px){
  :root{ --product-main-h: 320px; }
}

/* Swatch con dos colores */
.swatch{
  width:34px; height:34px; border-radius:999px;
  background: linear-gradient(90deg, var(--c1, var(--c,#ccc)) 0 50%, var(--c2, var(--c,#ccc)) 50% 100%);
  border:1px solid rgba(0,0,0,.15);
}
.swatch.selected{ outline:2px solid #8D8C60; outline-offset:2px; }
/* sello más grande en la ficha de producto */
.product-page .main .stamp{
  width: 150px !important;   /* antes ~74px */
  height: auto;
}
/* sello más grande en la pantalla de elección */
.select-model .option-card .stamp{
  width: 150px !important;   /* antes 72px */
  height: auto;
}