:root{
  --bg: #0F3D2E;         /* verde marca */
  --cream: #F2EEE8;      /* texto sobre verde */
  --paper: #ECE9E4;      /* fondo suave */
  --ink: #0B0B0B;        /* negro */
  --red: #C43A2B;        /* acento */
  --blue: #6FA8D6;       /* acento */
  --yellow: #D4B72A;     /* acento */
  --green: #2E8B57; /* verde estado disponible */

  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 14px 40px rgba(0,0,0,.12);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.10);

  --max: 1100px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.4;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }

.container{
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* Accessibility */
.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 16px; top: 16px; width:auto; height:auto;
  background: #fff; padding: 10px 12px; border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

/* Accessibility: oculto visual pero accesible */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary{
  background: var(--cream);
  color: var(--bg);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
  background: transparent;
  color: var(--cream);
  border-color: rgba(242,238,232,.35);
}
.btn-ghost:hover{ background: rgba(242,238,232,.08); }
.btn-wide{ width: 100%; padding: 14px 16px; border-radius: 16px; }

html{
  scroll-behavior: smooth;
}

/* Hero card */
.hero-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(242,238,232,.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.hero-card-top{
  display:flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(242,238,232,.14);
}
.dot{ width: 12px; height: 12px; border-radius: 50%; }
.dot-red{ background: var(--red); }
.dot-blue{ background: var(--blue); }
.dot-yellow{ background: var(--yellow); }
.hero-card-body{
  padding: 16px;
}
.hero-img{
  margin-top: 14px;
  height: 220px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(196,58,43,.25), rgba(111,168,214,.25)),
    linear-gradient(0deg, rgba(242,238,232,.06), rgba(242,238,232,.06));
  border: 1px dashed rgba(242,238,232,.25);
}

/* Sections */
.section{
  padding: 20px 0;
}

.section-head{
  margin-bottom: 15px;
}
.section-head h2{
  margin: 0 0 8px;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em;
}
.section-head p{
  margin: 0;
  opacity: .85;
  max-width: 70ch;
}
.section-cta{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Grid tiles (placeholder) */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.tile-img{
  height: 170px;
  background:
    radial-gradient(circle at 20% 30%, rgba(196,58,43,.25), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(111,168,214,.25), transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(212,183,42,.25), transparent 45%),
    var(--paper);
}
.tile-meta{
  padding: 14px;
}
.tile-meta h3{ margin:0 0 6px; font-size: 16px; }
.tile-meta p{ margin:0; opacity:.75; font-size: 14px; }

/* Two col */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.card{
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 18px;
}
.card h3{ margin:0 0 8px; }
.card p{ margin:0 0 10px; opacity:.85; }

.text-link{
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Info bar */
.info-bar{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}

/* Form */
.form{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.form-row{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 14px;
}
.form-row label{
  font-weight: 800;
}
input, select, textarea{
  font: inherit;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  box-sizing: border-box;
  outline: none;
  background: #fff;
}
/* Reset para radios/checkbox globales (evita que hereden el input "grande") */
input[type="radio"],
input[type="checkbox"]{
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* Radios dentro de las pills: invisibles pero accesibles */
.pill input[type="radio"]{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(15,61,46,.55);
  box-shadow: 0 0 0 4px rgba(15,61,46,.12);
}
.help{
  margin:0;
  font-size: 13px;
  opacity: .7;
}
.form-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.check{
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.check input{ margin-top: 2px; width: 18px; height: 18px; }

/* About */
.about p{
  margin: 0;
  max-width: 82ch;
  opacity: .88;
}

/* Footer */
.footer{
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 26px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.footer-logo{
  height: 18px;       /* desktop */
  width: auto;
  opacity: 0.85;      /* más editorial */
}

@media (max-width: 768px){
  .footer-logo{
    height: 16px;     /* mobile */
  }
}

.footer-right{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 800;
}
.micro{ font-size: 13px; }
.muted{ opacity: .75; }

/* Responsive */
@media (max-width: 920px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .two-col{ grid-template-columns: 1fr; }
  .info-bar{ grid-template-columns: 1fr; }
}
@media (max-width: 540px){
  .nav{ display:none; }
  .grid{ grid-template-columns: 1fr; }
  .form-split{ grid-template-columns: 1fr; }
  .brand-logo{ height: 40px; }
}

/* =========================
   VISIBILITY HELPERS
========================= */

.desktop-only{
  display: inline-flex;
}

.mobile-only{
  display: none;
}


/* =========================
   HEADER EDITORIAL (FINAL)
========================= */

.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  z-index: 1000;      /* 🔑 mucho más alto */
}

/* Contenedor interno */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =====================
   LOGO SVG (ARCHIVO)
===================== */

.logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo-img {
  display: block;
  height: 18px;     /* desktop */
  width: auto;
}

/* Mobile */
@media (max-width: 768px) {
  .logo-img {
    height: 14px;
  }
  .header-inner{
    padding: 10px 16px;   /* 🔥 menos altura */
  }
}

/* =========================
   HEADER MOBILE FIX
========================= */

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

  padding: 12px 16px;
  min-height: 72px; /* 🔥 clave para que exista */
}

/* ocultar nav desktop en mobile */
@media (max-width: 768px){

  .main-nav{
    display: none;
  }

  .mobile-only{
    display: block;
  }

}

/* opcional (recomendado) */
@media (min-width: 769px){

  .mobile-only{
    display: none;
  }

}

/* =====================
   NAVEGACIÓN
===================== */

.main-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  margin-left: auto;
  padding-right: 24px;
}

.main-nav a {
  text-decoration: none;
  color: #000;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;

  opacity: 0.85;
  transition: opacity .2s ease;
}

.main-nav a:hover {
  opacity: 1;
}

/* CTA del menú */
.nav-cta{
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}

.cta-dot{
  margin-left: 0.5px;
  color: var(--yellow);
  font-size: 1.2em;
  line-height: 1;
}

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

.header-actions{
  display: none;
  align-items: center;
  gap: 12px;
}

/* NAV DESKTOP */
@media (min-width: 769px){
  .nav-toggle{
    display: none;
  }
}

/* =====================
   SCROLL OFFSET
===================== */

#encargo{
  scroll-margin-top: 100px;
}

/* =========================
   COLORES DE MARCA – GLOBAL
========================= */

.c-red{
  color: var(--red);
}

.c-blue{
  color: var(--blue);
}

.c-yellow{
  color: var(--yellow);
}


/* =========================
   HERO EDITORIAL
========================= */

.hero-editorial{
  width: 100vw;
  margin-left: calc(50% - 50vw);

  min-height: 100svh;
  background-color: #f6efed;
  background-image: url("../assets/hero.jpg");
  background-repeat: no-repeat;
  background-position: center 70%; /* antes 70% */;
  background-size: cover;

  position: relative;
  display: flex;
  align-items: flex-end;
}

.hero-editorial::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(246,239,237,0) 45%,
    rgba(246,239,237,0.6) 65%,
    #ffffff 100%
  );
}

.hero-copy{
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 520px;

  padding: 20px 20px 20px;
  margin-left: 60px;
}

.hero-title {
  font-size: clamp(20px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.1;
margin-bottom: 10px;
}

.hero-title span {
  font-weight: 800;
}


  /* NAV DESKTOP */
@media (min-width: 769px){
  .nav-toggle{
    display: none;
  }
}

.desktop-only{
  display: none;
}

.mobile-only{
  display: flex;
}

.header-actions{
  display: flex;
}

  /* NAV MOBILE */
  @media (max-width: 768px){

  .main-nav{
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    padding-right: 0;

    position: static;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Idiomas ocultos por defecto */
  .main-nav .lang-switch{
    display: none;
  }

    .main-nav.is-open{
  display: flex;
}

  /* Cuando hamburguesa está activa */
  .main-nav.is-open .lang-switch{
    display: flex;
    flex-direction: column;

    position: absolute;
    top: calc(100% + 8px);
    right: 16px;

    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: 12px 16px;
    gap: 8px;

    z-index: 2000;
  }

 .nav-toggle{
    background: none;
    border: 0;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    z-index: 20;
     color: var(--blue);
  }

    .header-actions{
  display: flex;
  align-items: center;
}

.nav-toggle{
  display: block;      /* 🔥 esto es lo que falta */
}
    .main-nav.is-open .lang-switch{
  min-width: 80px;
  text-align: center;
}

.lang-switch .lang{
  font-weight: 700;
  padding: 4px 0;
}

}

/* =========================
   CAROUSEL EDITORIAL + COLECCIONES
========================= */

/* ---------- TITULO CARRUSEL ---------- */

.editorial-title{
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 16px;
}

/* ---------- SECCIÓN CARRUSEL ---------- */

.editorial-section{
  padding: 32px 0 16px;

  background: #ffffff;
}

/* ---------- CONTENEDOR + CARRUSEL ---------- */

.editorial-carousel{
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  margin: 30px auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #fff;
}
.carousel-track{
  display: flex;
  width: 100%;
  transition: transform 0.6s ease;
}

.carousel-slide{
  flex: 0 0 100%;
}

@media (max-width: 768px){
  .editorial-section{
    padding-top: 30px;
  }
}


/* ---------- GRID DESKTOP ---------- */

@media (min-width: 769px){
  .editorial-section{
    padding: 24px 0 16px;
  }

  .editorial-title{
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.15;
    margin-bottom: 0;
    max-width: 16ch;
    text-align: left;
  }

  .editorial-title .editorial-line2{
    display: block;
    margin-top: 24px;
  }

  .editorial-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: center;
  }

  .editorial-carousel{
    justify-self: start;
    max-width: 460px;
  }
}

/* =========================
   HEADERS DE SECCIÓN
========================= */

.section-header{
  max-width: 900px;     /* 🔑 igual que las cards */
  margin: 0 auto 28px; /* centra el bloque */
  padding: 0 16px;     /* mismo padding que grid */
}

.section-header h2{
  font-size: 28px;
  margin: 0 0 6px;
}

.section-header p{
  max-width: 520px;
  font-size: 15px;
  color: #555;
  margin: 0;
}

/* =========================
   COLECCIONES · TARJETA
========================= */

.collection-card{
  display: flex;
  flex-direction: column;
  gap: 4px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.collection-head{
  text-align: center;
}

.collection-head h3,
.collection-head h4{
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

/* =========================
   GRID ENTRE COLECCIONES (DESKTOP)
   → como disponibles.html
========================= */
@media (min-width: 1024px){
  .collections-grid.main{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

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

.collection-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 2.8 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),
    0 6px 18px rgba(0,0,0,0.06);
  max-width: 94%;
  margin: 0 auto;
}

/* Ajuste proporción en desktop */
@media (min-width: 1024px){
  .collection-frame{ aspect-ratio: 3 / 4; }
}

/* =========================
   SLIDES (estructura común)
========================= */

.img-item{
  position: relative;
  width: 100%;
  height: 100%;
}

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

/* =========================
   FLECHAS DESKTOP
========================= */

.collection-frame .nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.collection-frame .nav.prev{ left: 10px; }
.collection-frame .nav.next{ right: 10px; }

/* =========================
   BADGE PRECIO (siempre visible en desktop + mobile)
========================= */

.price-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* =========================
   CTA OVERLAY
   - Desktop: sólo aparece al hover
   - Mobile: siempre visible
========================= */

.collection-cta-overlay{
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: #000;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  z-index: 40;
}

/* =========================
   DESKTOP · Carrusel por opacidad
========================= */

@media (min-width: 769px){

  /* Todos los slides ocultos */
  .collection-frame .img-item{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }

  /* Activo visible */
  .collection-frame .img-item.is-active{
    opacity: 1;
    pointer-events: auto;
  }

  /* CTA oculto por defecto en desktop */
  .collection-frame .collection-cta-overlay{
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  /* CTA aparece SOLO en el slide activo cuando hay hover */
  @media (hover:hover){
    .collection-frame:hover .img-item.is-active .collection-cta-overlay{
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* =========================
   MOBILE · TODO AL FINAL
========================= */

@media (max-width: 768px){

  /* Más aire lateral */
  .collections{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Swipe: el frame se vuelve carrusel horizontal */
  .collection-frame{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    background: transparent; /* 🔑 quita el gris */
    padding: 0;
    border-radius: 22px;

    height: auto;            /* 🔑 clave */
    aspect-ratio: unset !important; /* 🔑 mata el ratio */
  }

  /* 🔑 CLAVE: cada slide vuelve al flujo normal */
  .collection-frame .img-item{
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    scroll-snap-align: start;
  }

  .collection-frame .img-item img{
    width: 100%;
    height: auto;
    display: block;
  }

  .collection-frame::-webkit-scrollbar{
    display: none;
  }

  /* CTA siempre visible en mobile (arriba derecha) */
  .collection-frame .collection-cta-overlay{
    opacity: 1;
    pointer-events: auto;
  }

  /* Precio siempre visible en mobile */
  .collection-frame .price-badge{
    opacity: 1;
  }

  /* Ocultar flechas en mobile */
  .collection-frame .nav{
    display: none;
  }
  
  .collection-card{
  overflow: hidden;
  border-radius: 22px;}

  /* FIX hueco gris en inspírate */
  .collections-grid.inspo .collection-frame{
    aspect-ratio: auto;
    height: auto;
  }

  .collections-grid.inspo .img-item,
  .collections-grid.inspo .img-item img{
    height: auto;
  }

}

/* =========================
   GRID INSPÍRATE · DESKTOP
========================= */

@media (min-width: 1024px){
  .collections-grid.inspo{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

.collections-grid.inspo .collection-frame{
  aspect-ratio: 3 / 4;
  max-width: 82%;
  margin: 0 auto;
}

/* =========================
   MODAL · FORMULARIO POPUP
========================= */

.modal{
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
}

.modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

/* Caja modal */
.modal-box{
  position: relative;
  max-width: 420px;
  width: calc(100% - 32px); /* ✅ asegura margen lateral en móvil */
  margin: 0;                /* ✅ clave: ya no usamos 5vh auto */
  background: #fff;
  border-radius: 20px;
  padding: 20px;

  
  z-index: 2;

  max-height: 90vh;     /* 🔑 no se sale de pantalla */
  overflow-y: auto;     /* 🔑 scroll interno */
}

/* Imagen referencia */
.modal-image{
  background: #f6f6f6;
  border-radius: 14px;
  padding: 8px;
  margin-bottom: 12px;
}

.modal-image img{
  width: 100%;
  max-height: 30vh;     /* desktop */
  object-fit: contain; /* 🔑 no se corta la pieza */
  border-radius: 10px;
}

/* Cerrar */
.modal-close{
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Copy */
.modal-copy{
  font-size: 14px;
  line-height: 1.4;
  margin: 6px 0 14px;
  color: #333;
}

.rgpd-label input{
  margin: 0;
}


/* =========================
   MODAL · MOBILE
========================= */

@media (max-width: 768px){

   .modal.is-open{
    align-items: flex-start;
    padding-top: 80px;
  }
  
  .modal-box{
    max-height: calc(100vh - 100px); /* ✅ deja aire arriba/abajo */
    padding: 14px;
  }

  .modal-image img{
    max-height: 22vh;   /* 🔑 clave para que se vea todo el form */
    margin-bottom: 10px;
  }
}

/* Inspírate más pequeño */
.collections-grid.inspo .collection-frame{
  max-width: 88%;
  margin: 0 auto;
}

@media (min-width: 1024px){
  .collections-grid.inspo{
    gap: 20px;
  }
}

.collections-separator{
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.08);
  max-width: 1200px;
  margin: 64px auto 48px;
}

/* =========================
   CTA PILL – GLOBAL
========================= */

.cta-pill{
  display: inline-block;
  padding: 16px 28px;

  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;

  background: var(--blue);
  color: #fff;
  text-decoration: none;

  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);

  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-pill::after{
  color: #fff;
}
@media (hover: hover){
  .cta-pill:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  }
}

/* Ajuste mobile */
@media (max-width: 768px){
  .cta-pill{
    font-size: 16px;
    padding: 14px 24px;
  }
}


/* =========================
   FLOW BG (HOW + FORM)
========================= */

.flow-bg{
  position: relative;
  background: none;
  padding: 60px 0 30px;
  overflow: hidden;
  z-index: 1;
}

.flow-bg::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("../assets/bg/bolas-wide.png");
  background-repeat: no-repeat;
  background-position: center calc(100% + 80px);
  background-size: contain;

  opacity: 0.25;          /* 🔑 CLAVE */
  pointer-events: none;
  z-index: 0;
  filter: blur(1px);
}

.flow-bg > .section{
  background: transparent !important;
  padding: 0;
}

.flow-bg::after{
  content: "";
  display: block;
  height: 1px;
  background: #fff;
}

/* Fuerza fondo blanco en sections clave */
.collections,
.section,
.section-alt {
  background: #fff;
}


@media (max-width: 768px){
  .flow-bg{
    position: relative;
    background: none; /* anulamos el fondo directo */
    overflow: hidden;
  }

  .flow-bg::before{
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("../assets/bg/bolas-wide.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 900px auto;

    opacity: 0.50; /* 🔑 igual que el form */
    filter: blur(1px); /* 🔑 efecto difuminado */
    
    pointer-events: none;
    z-index: 0;
  }

  .flow-bg > *{
    position: relative;
    z-index: 1;
  }
}


/* =========================
   HOW SECTION – FINAL DEFINITIVO
========================= */

/* Sección HOW */
.how-section{
  padding: 60px 0;               /* 🔑 más aire vertical */
  background: #fff;              /* caja blanca única */
    margin-bottom: 100px;
}

/* Caja HOW (igual lógica que el formulario) */
.how-inner{
  max-width: 1000px;             /* 🔑 mismo ancho que form */
  margin: 0 auto;
  padding: 48px 48px 40px;
  background: #fff;
  border-radius: 24px;
}

/* Título */
.how-section .section-head{
  margin-bottom: 28px;           /* 🔑 título cerca pero no pegado */
}

/* =========================
   HOW CARDS
========================= */

.how-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
max-width: 860px;   /* prueba 860–920 */
    margin-left: auto;
    margin-right: auto;
}

.how-card{
  display: block;
  grid-template-columns: 1fr auto;
  gap: 24px;

  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
  grid-template-columns: 1fr !important;
}

.how-instagram{
  border: 2px solid rgba(199,55,47,0.25);
}

.how-custom{
  border: 2px solid rgba(90,140,210,0.25);
}

.how-content h3{
  font-size: 18px;
  margin-bottom: 8px;
}

.how-content p{
  font-size: 14px;
  line-height: 1.5;
  max-width: 38ch;
  margin-bottom: 16px;
  max-width: 50ch;
}

.how-icon img{
  width: 72px;
  height: auto;
  opacity: 0.9;
}
.how-instagram .cta-pill{
  background: var(--red);
  color: #fff;
}

.how-instagram .cta-pill::after{
  color: #fff;
}


/* =========================
   HOW DESKTOP
========================= */

@media (min-width: 769px){
  .how-grid{
    grid-template-columns: 1fr 1fr;
  }
  .how-section .section-head{
    margin-left: 38px;   /* ajusta entre 32–48 */
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 16px;   /* antes 28px */
  }
}

/* =========================
   HOW MOBILE
========================= */

@media (max-width: 768px){
  .flow-bg::before{
    opacity: 0.06;          /* antes 0.12 → más etéreo */
    background-size: 700px auto; /* menos dominante */
    background-position: center bottom;
  }
.how-inner{
    padding: 28px 20px 32px; /* 🔑 más ancho visual */
    border-radius: 20px;
  }

  .how-grid{
    max-width: 100%;
  }

  .form-inner{
    margin-bottom: 0;
  padding-bottom: 1px;
  }
}

@media (max-width: 768px){
  .how-section .section-head h2{
    margin-bottom: 10px;   /* antes más compacto */
  }

  .how-section .section-head p{
    margin-top: 0;
    margin-bottom: 20px;  /* da aire antes de las cards */
  }
}

/* =====================
   FORM BLOCKS
===================== */

.form-block{
  border: none;
  margin: 0 0 10px;
  padding: 0;
}

.form-block legend{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 5px;
}

/* Group */
.form-group{
  margin-bottom: 20px;
}

.group-label{
  font-weight: 800;
  margin-bottom: 10px;
  display: block;
}

.group-help{
  font-weight: 400;
  font-size: 13px;
  opacity: 0.7;
  margin-left: 6px;
}

.form-inner{
  padding: 30px 30px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop: sin caja */
@media (min-width: 769px){
  .form-inner{
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(3px);
    border-radius: 24px;
  }
}

/* Mobile: mantenemos la caja */
@media (max-width: 768px){
  .form-inner{
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(4px);
    border-radius: 24px;
  }
}

.form-intro{
  margin: 5px 0 30px;
  font-size: 9px;
  line-height: 1.5;
  opacity: 0.75;
  max-width: 100ch;
}
.form-group textarea::placeholder{
  font-size: 12px;
  color: #9a9a9a;
  opacity: 1;
}
.form-group textarea{
  display: block;
  width: 100%;
  min-height: 120px;
  resize: none;                 /* 🔑 elimina crecimiento raro */

  padding: 14px 16px;
  font-size: 14px;              /* 🔑 tamaño correcto */
  line-height: 1.45;

  border-radius: 16px;
}

/* =====================
   TIPOLOGÍA – PILLS
===================== */

.pill-group{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 520px;
}

.pill{
  position: relative; /* necesario para esconder el radio */
  width: 100%;
}

.pill-btn{
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;

  font-weight: 500;
  transition: all .2s ease;
  text-align: center;
}

/* MATA cualquier pseudoelemento antiguo que te esté dibujando cápsulas internas */
.pill-btn::before,
.pill-btn::after{
  content: none !important;
}

.pill-icon{
  flex: 0 0 34px;          /* 🔑 tamaño fijo */
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.pill-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;

  display: block;
  transform: translateY(-1px); /* ajuste óptico */
}

/* Ajuste óptico del icono */
.pill-icon img{
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-1px); /* 🔑 ajuste fino */
}

.pill-text{
  white-space: nowrap;
}

/* estados (los que ya usas con JS) */
.pill.is-selected .pill-btn{
  border-color: var(--blue);
  background: rgba(111,168,214,0.12);
  color: #000;
}

.pill.is-dimmed .pill-btn{
  opacity: 0.45;
}

@media (max-width: 540px){
  .pill-group{
    grid-template-columns: 1fr;
    max-width: 100%;
  }

.pill-btn{
    min-height: 35px;
    padding: 10px 14px;
    gap: 5px;
  }
.pill-icon{
    width: 28px;
    height: 28px;
  }

}

/* =====================
   CLASES CARDS
===================== */
/* Panels ocultos por defecto */
.class-panel{
  display: none;
  margin-top: 16px;
}

/* panel activo */
.class-panel.is-visible{
  display: block;
  margin-top: 20px;
}

/* Cards seleccionables */
.class-card{
  border: 2px solid rgba(90,140,210,0.25);
}

.class-card input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.class-card input:checked + .how-content{
  /* no lo usamos */
}

/* 🔑 estado activo real */
.class-card:has(input:checked){
  border-color: var(--blue);
  background: rgba(111,168,214,0.10);
}

/* =====================
   CLASES – GRID DESKTOP
===================== */

@media (min-width: 769px){

  /* Por defecto: 3 columnas */
  .class-panel .how-grid{
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  /* Cuando solo hay 2 cards (pendientes / broches) */
  .class-panel .how-grid:has(.how-card:nth-child(2):last-child){
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;   /* opcional, para que no se estiren demasiado */
  }
}

/* =====================
   CARD – PRECIO + CONTADOR
===================== */

.price-line{
  font-size: 14px;
  margin-bottom: 6px;   /* 🔑 junta con prepago */
}

.quantity-selector.inside-card{
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn{
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.qty-value{
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* =====================
   CHIPS (COLECCIONES)
===================== */

.chip-group{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 5px; /* 🔑 más aire vertical */
}

.chip{
  cursor: pointer;
}

.chip input{
  display: none;
}

.chip span{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;

  font-size: 14px;
  transition: all .2s ease;
}

/* Estado activo */
.chip input:checked + span{
  border-color: var(--red);
  background: rgba(0,0,0,0.04);
}

/* Hover */
@media (hover: hover){
  .chip span:hover{
    border-color: rgba(0,0,0,0.35);
  }
}

.chip.is-disabled span{
  opacity: 0.4;
  cursor: not-allowed;
}

/* =====================
   TAMAÑO
===================== */

.size-group{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 520px;
}

.size-option{
  position: relative;
}

.size-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.size-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  padding: 18px 5px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;

  text-align: center;
  transition: all .2s ease;
}

.size-title{
  font-size: 15px;
  font-weight: 600;
}

.size-desc{
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.65;
}

/* seleccionado */
.size-option input:checked + .size-card{
  border-color: #111;
  background: rgba(0,0,0,0.05);
}

/* hover */
@media (hover: hover){
  .size-card:hover{
    border-color: rgba(0,0,0,0.35);
  }
}

/* mobile */
@media (max-width: 540px){
  .size-group{
    grid-template-columns: 1fr;
  }
.size-card{
    padding: 14px 12px;
  }

  .size-title{
    font-size: 14px;
  }

  .size-desc{
    font-size: 12px;
  }

}

/* =====================
   COLORES
===================== */

.color-group{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 360px;
}

.color-dot{
  position: relative;
  cursor: pointer;
}

.color-dot input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.color-dot span{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c);
  display: block;

  border: 2px solid rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* seleccionado */
.color-dot input:checked + span{
  box-shadow: 0 0 0 3px #111;
}

/* hover */
@media (hover: hover){
  .color-dot span:hover{
    transform: scale(1.05);
  }
}

.color-helper{
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.7;
}

/* =====================
   DATOS PERSONALES
===================== */

.form-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 520px;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label{
  font-size: 14px;
  font-weight: 600;
}

.field input{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.15);
  font-size: 15px;
}

/* Teléfono ocupa fila completa */
.field:nth-child(3){
  grid-column: 1 / -1;
}

/* Mobile */
@media (max-width: 540px){
  .form-fields{
    grid-template-columns: 1fr;
  }
}
/* =====================
   RGPD · UNIFICADO
===================== */

.rgpd-group{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* separación vertical entre RGPDs */
}

.rgpd-label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}

.rgpd-label input{
  flex: 0 0 auto;
  margin: 0;
}

.rgpd-label a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================
   CTA FINAL – FORM
===================== */
.price-summary{
  margin: 32px 0 24px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.04);
  max-width: 520px;
}

.price-row{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.price-row.total{
  font-size: 16px;
  margin-top: 12px;
}
.price-note{
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #666;
  opacity: 0.7;
}
@media (max-width: 540px){
  .price-note{
    font-size: 11px;
  }
}

.price-summary{
  margin: 32px 0 24px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,0.04);
  max-width: 520px;
}


.form-cta{
  margin-top: 36px;
  text-align: center;
}

.cta-main{
  appearance: none;
  border: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 18px 36px;
  border-radius: 999px;

  background: var(--blue);
  color: #fff;

  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;

  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-main:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.2);
}

.cta-main .cta-dot{
  color: #fff;
}
.cta-alt{
  appearance: none;
  border: 2px solid var(--blue);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 32px;
  border-radius: 999px;

  background: #fff;
  color: var(--blue);

  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;

  transition: all .2s ease;
}

.cta-alt:hover{
  background: rgba(111,168,214,0.08);
  transform: translateY(-2px);
}

.cta-helper{
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}
.cta-note{
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
.cta-price{
  text-align: center;
  font-size: 15px;
  margin-bottom: 12px;
}

.cta-price strong{
  font-size: 17px;
}

/* Mobile */
@media (max-width: 540px){
  .cta-main{
    width: 100%;
    font-size: 16px;
    padding: 16px 24px;
  }
}
/* =====================
   CTA FINAL – MOBILE FIX DEFINITIVO
===================== */
@media (max-width: 540px){

  .form-cta{
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
  }

  /* CTA principal */
  .cta-main{
    width: 100%;
    font-size: 16px;
    padding: 16px 20px;
  }

  /* CTA secundario: claramente menor */
  .cta-alt{
    width: 100%;
    font-size: 14px;
    padding: 12px 18px;
    opacity: 0.85;
  }

  /* Separador visual */
  .cta-separator{
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
  }

}

/* =========================
   FOOTER
========================= */

.site-footer{
  background: #ECE9E4; /* mismo paper, sin imagen */
  isolation: isolate;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 15px 0 15px;
    padding-top: 15px; /* reduce aire superior */
  position: relative;
  z-index: 2; /* 🔑 clave para cortar el bg */
}

.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-copy{
  font-size: 13px;
  opacity: 0.7;
}

.footer-links{
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-ig{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.footer-ig img{
  width: 30px;
  height: 30px;
}

.footer-mail{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 640px){
  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}


/* =========================
   MOBILE FIX (HEADER + HERO)
========================= */

@media (max-width: 768px){
  .hero-editorial{
  position: relative;
  min-height: 80svh;          /* 🔑 controla el hero */
  background-image: url("../assets/hero-mobile.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 75%;
  background-color: #fff;
  display: flex;
}

 .hero-copy{
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: flex-start;   /* evita centrados por flex */
  padding: 32px 20px 36px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.hero-editorial::after{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,0.7) 80%,
      #ffffff 100%
    );
  }

  .hero-title{
    font-size: 22px;
    text-align: left;
    max-width: 18ch;  
  }
}

/* =========================
   THANK YOU PAGE – CTA FIX
========================= */

.thanks-cta{
  margin-top: 36px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.thanks-cta .cta-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  line-height: 1;
  font-size: 16px;
}

/* =====================
   DISPONIBLES
===================== */

.available-page{
  padding: 40px 20px 80px;
}

.available-intro{
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.available-intro h1{
  font-size: 34px;
  margin-bottom: 12px;
}

.available-intro p{
  font-size: 16px;
  opacity: 0.8;
}

/* =====================
   GRID
===================== */

.available-grid{
  display: grid;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px){
  .available-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 1023px){
  .available-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================
   CARD
===================== */

.piece-card{
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.piece-card::after{
  content: attr(data-status);
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.03em;
  z-index: 3;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}

/* BADGE */
.piece-card.available::after,
.piece-card.sold::after{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.03em;
  z-index: 3;
}

.piece-card.available::after{
  content: "Disponible";
  background: var(--green);
  color: #fff;
}

.piece-card.sold::after{
  content: "Vendida";
  background: rgba(0,0,0,0.75);
  color: #fff;
}

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

.piece-image{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.piece-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .3s ease;
}

.hover-img{
  opacity: 0;
}

/* =====================
   HOVER · DESKTOP
===================== */

@media (hover:hover){

  .piece-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.14);
  }

  .piece-card:hover::after{
    transform: translateY(-2px);
  }

  .piece-card:hover .hover-img{
    opacity: 1;
  }

  .piece-card:hover .piece-image img:first-child{
    opacity: 0;
  }
  .no-hover .hover-img {
  display: none !important;
}

  /* Aire extra solo en hover (opcional, elegante) */
  .piece-card:hover .piece-cta{
    padding-top: 18px;
  }
}

/* =====================
   BODY (texto + CTA)
===================== */

.piece-body{
  padding: 14px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.piece-card h3{
  font-size: 18px;
  font-weight: 700;
    margin: 0 0 4px; /* 🔑 antes era mayor implícito */
}

.piece-price{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.piece-price span{
  display: block;
  font-size: 12px;
  opacity: 0.65;
  margin-top: 0;
}

.piece-sold-copy{
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin: 4px 0 10px;
}

/* CTA */
.piece-cta{
  margin-top: 6px;   /* 🔑 colchón visual */
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.piece-cta.alt{
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

/* =====================
   FORM · CAMPOS (GLOBAL)
===================== */

textarea::placeholder{
  color: #aaa;
}

.field-label{
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
  color: #333;
}

.modal-form input,
.modal-form textarea{
  width: 100%;
}

/* =====================
   RGPD · FIX DEFINITIVO EN MODAL
===================== */

.modal .rgpd-group{
  width: 100%;
}

.modal .rgpd-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.modal .rgpd-row input[type="checkbox"]{
  margin-top: 3px;
  flex: 0 0 auto;
}

.modal .rgpd-row label{
  flex: 1;
  display: block;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
}
/* =====================
   MODAL FORM · LAYOUT DEFINITIVO
===================== */

.modal-form{
  display: block !important;
}

/* El botón se centra explícitamente */
.modal-form .cta-main{
  display: block;
  margin: 0 auto;
}


/* =========================
   HOVER SOLO CUANDO EXISTE Y SOLO EN DESKTOP REAL
========================= */

/* Por defecto: nunca apagar la imagen */
.piece-image img{
  opacity: 1;
}

/* Solo dispositivos con hover REAL */
@media (hover: hover) and (pointer: fine) {

  /* Hover solo si existe una imagen secundaria */
  .piece-card:has(.hover-img):hover .piece-image img:first-child{
    opacity: 0;
  }

  .piece-card:has(.hover-img):hover .hover-img{
    opacity: 1;
  }

}

/* =========================
   CATÁLOGO · CARDS
   Este CSS SOLO afecta a vistas de catálogo
========================= */

/* CONTEXTO */
.catalog-grid .piece-card{
  position: relative;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  height: auto;
  align-self: start;
}

.catalog-grid h2{
  font-size: 14px;
    margin-bottom: 2px;
}

.catalog-grid .piece-card::after{
  display: none !important;
}
/* 🔑 Evita que el grid estire las cards en altura (causa del hueco blanco) */
.catalog-grid{
  align-items: start;
}

.catalog-grid .piece-card{
  align-self: start;
    margin-top: 0;
}

/* =========================
   CATÁLOGO · IMÁGENES (FIX DEFINITIVO SIN HUECO)
========================= */

@media (hover:hover) and (pointer:fine){
  .catalog-grid .piece-card:hover .piece-image .hover-img{
    opacity: 1;
  }
}


/* =========================
   CATÁLOGO · RESET + HOVER PROPIO
========================= */

/* Solo desktop real */
@media (hover: hover) and (pointer: fine){

  /* 🔑 Reset total del hover heredado */
  .catalog-grid .piece-card:hover .piece-image img:first-child{
    opacity: 1 !important;
        visibility: visible !important;
  }

  /* Hover catálogo: solo superponer la secundaria */
  .catalog-grid .piece-card:hover .hover-img{
    opacity: 1;
  }
}

/* =========================
   CATÁLOGO · CTA FIJO (ANTI-SALTO)
========================= */

.catalog-grid .piece-cta{
  font-size: 14px;
  padding: 9px 18px;
  margin-top: 6px;

  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* =========================
   CATÁLOGO · CTA FIJO (DEFINITIVO)
========================= */

/* Blindaje total contra hover global */
.catalog-grid .piece-cta:hover,
.catalog-grid .piece-cta:focus,
.catalog-grid .piece-cta:active,
.catalog-grid .piece-card:hover .piece-cta{
  transform: none;
  box-shadow: none;
  padding: 9px 18px;
}

/* =====================
   CARD · TEXTO LEGAL
===================== */

.piece-legal{
  margin-top: 8px;
  padding-left: 16px;
  font-size: 11px;
  line-height: 1.4;
  color: #666;
    margin-bottom: 0;
}

.piece-legal li{
  margin-bottom: 4px;
}
  
.catalog-grid .piece-legal{
  display: block;
  margin-top: 8px;
  padding-left: 16px;

  font-size: 11px;
  line-height: 1.45;
  color: #666;
}

.catalog-grid .piece-legal li{
  margin-bottom: 4px;
}

/* =====================
   MODAL · RGPD (FORZADO CHECKBOX REAL)
   Pegar AL FINAL del CSS
===================== */

.modal .rgpd-group{
  width: 100%;
  margin-top: 12px;
}

.modal .rgpd-row{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

/* 🔑 Esto es lo que suele arreglarlo: matar estilos globales del input */
.modal .rgpd-row input[type="checkbox"]{
  appearance: auto;         /* vuelve a checkbox nativo */
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  margin: 2px 0 0 0 !important;
  flex: 0 0 auto;
}

.modal .rgpd-row label{
  flex: 1;
  display: block;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

/* Evita cosas raras del link */
.modal .rgpd-row label a{
  display: inline;
  white-space: nowrap; /* si prefieres que NO parta “política de privacidad” */
}

/* =====================
   COLECCIONES
===================== */
.collections-grid{
  display: grid;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px){
  .collections-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px){
  .collections-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.collection-card a{
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: visible;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

@media (hover:hover){
  .collection-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  }
}

.collection-card img{
  width: 100%;
  display: block;
  object-fit: cover;
}

.collection-body{
  padding: 16px 18px 20px;
}

.collection-body h3{
  font-size: 18px;
  margin-bottom: 4px;
}

.collection-price{
  font-size: 14px;
  opacity: .75;
  margin-bottom: 10px;
}

.collection-cta{
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* =========================
   HOME · COLECCIONES SIMPLES
========================= */

.home-collections{
  display: grid;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
    padding: 60px 20px;
}

@media (min-width: 1024px){
  .home-collections{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px){
  .home-collections{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .home-collections{
    grid-template-columns: 1fr;
  }
}

/* Card base */
.home-collections .collection-card{
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(4px);
}

.home-collections .collection-card a{
  box-shadow: none;
  transform: none;
}

@media (hover:hover){
  .home-collections .collection-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  }
}

/* Imagen simple */
.home-collections .collection-card img{
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Contenido */
.home-collections .collection-body{
  padding: 16px 16px 10px;
  text-align: center;
}

.home-collections .collection-body h3{
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.home-collections .collection-media{
  position: relative;
  padding: 14px;
}

.home-collections h3{
  font-size: 18px;
  margin-bottom: 4px;
}

.home-collections .collection-price{
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: 12px;
}

.home-collections .collection-cta{
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  margin: 12px auto 0;
}

.collection-media{
  position: relative;
  padding: 12px;
}

.collection-price-badge{
  position: absolute;
  top: -12px;
  right: 16px;

  padding: 6px 12px;
  border-radius: 999px;

  background: #000;
  color: #fff;

  font-size: 12px;
  font-weight: 800;

  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

/* =========================
   HOME · INTRO COLECCIONES
========================= */

.collections-intro{
  max-width: 1200px;
  margin: 0 auto 16px;
  padding: 0 20px;
}

.collections-intro h2{
  margin-left: 0;
}

/* =========================
   HOME · FOOTER CARD (FINAL)
========================= */

.home-collections .collection-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 22px 22px;   /* 🔑 más aire general */
  gap: 18px;                 /* 🔑 separa precio y CTA */

  background: #fff;
}

/* PRECIO */
.home-collections .collection-price-text{
  font-size: 16px;           /* 🔑 más cuerpo */
  font-weight: 900;          /* 🔑 más presencia */
  color: #000;

  margin-left: 6px;          /* 🔑 no tan a la izquierda */
  white-space: nowrap;
}

/* CTA */
.home-collections .collection-cta{
  margin: 0;

  padding: 10px 20px;        /* 🔑 botón más “serio” */
  font-size: 13px;
  font-weight: 800;

  border-radius: 999px;
  background: var(--blue);
  color: #fff;

  white-space: nowrap;
}

/* =========================
   CATÁLOGO · TUNING + SWIPE ROBUSTO (SIN :has)
   Pegar al FINAL del CSS
========================= */

/* ---------- Título + spacing ---------- */
.catalog-grid .piece-body{
  padding: 10px 14px 8px;
  padding-left: 12px;
  padding-right: 12px;
  gap: 4px;
}

.catalog-grid .piece-body h2{
  font-size: 18px;               /* antes 14 */
  margin: 0;               /* menos hueco con la imagen */
  line-height: 1.3;
}

/* ---------- CTA un poco más grande (desktop) ---------- */
.catalog-grid .piece-cta{
  font-size: 14px;
  padding: 9px 18px;
  margin-top: 6px;
}

/* =========================
   FIX · CATÁLOGO SIN HUECO (pisar aspect-ratio global)
   Pegar AL FINAL del CSS
========================= */

.how-label{
  display: block;
  cursor: pointer;
}

.how-title{
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.how-desc{
  display: block;
  font-size: 14px;
  opacity: 0.85;
}

/* =========================
   FIX DEFINITIVO · CTA CATÁLOGO NO SE RECORTA
   (Pegar al FINAL del CSS)
========================= */

/* 1) En catálogo, la card NO debe recortar (el recorte es de la imagen) */
.catalog-grid .piece-card{
  overflow: visible !important;
}

/* 2) La imagen sí recorta (mantiene esquinas limpias) */
.catalog-grid .piece-image{
  overflow: hidden;
}

/* 3) Mata el “salto” del CTA heredado en hover global */
@media (hover: hover) and (pointer: fine){
  .catalog-grid .piece-card:hover .piece-cta{
    padding-top: 0 !important;   /* anula tu padding-top:18px global */
    transform: none !important;
  }
}

/* =========================
   RESET TOTAL · CTA + LINKS EN CATÁLOGO
========================= */

/* 1. Ningún <a> se mueve */
.catalog-grid a,
.collection-card a{
  transform: none !important;
}

/* 2. Ningún CTA cambia padding, posición o transform */
.catalog-grid .piece-cta,
.catalog-grid .piece-cta:hover,
.catalog-grid .piece-card:hover .piece-cta,
.collection-card .collection-cta,
.collection-card:hover .collection-cta{
  transform: none !important;
  padding: 8px 16px !important;
  margin-top: 8px !important;
}

/* =========================
   HOVER ÚNICO · CARD (NO CTA)
========================= */

@media (hover:hover) and (pointer:fine){
  .collection-card,
  .catalog-grid .piece-card{
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .collection-card:hover,
  .catalog-grid .piece-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.14);
  }
}

/* =========================
   COLCHÓN FIJO ENTRE IMAGEN Y CTA
========================= */

.catalog-grid .piece-body,
.collection-body{
  padding-bottom: 16px;
}

.piece-note{
  font-size: 12px;
  opacity: 0.75;
  margin: 4px 0 6px;
}

/* =====================
   BADGE · ESTADO (FINAL MARCA)
===================== */

.status-badge{
  position: absolute;
  top: 14px;
  right: 14px;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;

  background: #fff;
  color: #000;

  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);

  z-index: 1;
}

/* Disponible (verde) */
.status-badge.available{
  background: var(--green);
  color: #fff;
  border: none;
}

/* Disponible con variaciones (MISMO VERDE) */
.status-badge.variation{
  background: var(--green);
  color: #fff;
  border: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* Vendida (gris claro, neutro) */
.status-badge.sold{
  background: #f2f2f2;          /* gris muy claro */
  color: #666;                  /* texto suave */
  border: 1px solid #e0e0e0;    /* borde casi imperceptible */
}

/* =====================================================
   CATÁLOGO · SISTEMA IMAGEN ÚNICO Y ESTABLE
===================================================== */

.catalog-grid .piece-image{
  position: relative;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  padding: 12px;
  box-sizing: border-box;
}

/* Imagen principal define altura */
.catalog-grid .piece-image > img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Hover superpuesta exacta */
.catalog-grid .piece-image > img.hover-img{
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

/* Hover solo desktop real */
@media (hover:hover) and (pointer:fine){
  .catalog-grid .piece-card:hover .piece-image > img.hover-img{
    opacity: 1;
  }
}

/* =========================
   MOBILE SWIPE LIMPIO
========================= */

@media (hover: none) and (pointer: coarse){

  .catalog-grid .piece-image.has-swipe{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0; /* 🔑 importante */
  }

  .catalog-grid .piece-image.has-swipe > img{
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
    scroll-snap-align: start;
    position: relative;
    inset: auto;
    opacity: 1;
  }

  /* En móvil no hay hover overlay */
  .catalog-grid .piece-image.has-swipe > img.hover-img{
    position: relative;
  }
}

/* =====================================================
   FIX DEFINITIVO · EN HOVER NO SE VE NADA DE MAIN (DESKTOP)
   Pegar AL FINAL del CSS (último)
===================================================== */

@media (hover:hover) and (pointer:fine){

  /* Preparación: que ambas puedan fundirse */
  .catalog-grid .piece-image.has-swipe > img{
    transition: opacity .18s ease;
  }

  /* Hover: mostramos hover */
  .catalog-grid .piece-image.has-swipe > img.hover-img{
    opacity: 0;
  }

  .catalog-grid .piece-card:hover .piece-image.has-swipe > img.hover-img{
    opacity: 1;
  }

  /* Hover: ocultamos main (clave para que no “asome” nunca) */
  .catalog-grid .piece-card:hover .piece-image.has-swipe > img:not(.hover-img){
    opacity: 0;
  }
}

/* =========================================
   DESKTOP · CARDS CATÁLOGO MÁS COMPACTAS
========================================= */

@media (min-width: 1200px){

  .catalog-grid{
    max-width: 1100px;              /* más estrecho */
    margin: 0 auto;
    gap: 28px;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================
   CTA SECUNDARIO · VARIACIONES (EDITORIAL)
========================= */

.catalog-grid .piece-cta-secondary{
  display: block;
  margin-top: 10px;
    margin-bottom: 6px;

  font-size: 14px;        /* mismo tamaño que el cuerpo */
  font-weight: 600;
  color: var(--blue);

  background: none;
  border: none;
  padding: 0;

  text-align: left;
  cursor: pointer;

  transition: opacity .2s ease;
}

.catalog-grid .piece-cta-secondary:hover{
  opacity: .8;
  text-decoration: underline;
}

/* Alinear el titular del bloque ENCARGO con el inicio del formulario */
.encargo-section .section-head{
  max-width: 1000px;     /* igual que .form-inner */
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;    /* igual que el padding de .form-inner */
  padding-right: 30px;
}

/* Mobile: mismo “inicio” visual que el form */
@media (max-width: 768px){
  .encargo-section .section-head{
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Más separación antes del formulario */
#encargo{
  margin-top: 120px;
}

/* En móvil un poco menos para no romper ritmo */
@media (max-width: 768px){
  #encargo{
    margin-top: 80px;
  }
}

/* Reducir separación entre título de colecciones y sus cards */
.collections-intro{
  margin-bottom: 8px;   /* antes más amplio */
}

.home-collections{
  padding-top: 20px;    /* antes 60px */
}

/* Idioma */

.lang-switch{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-left: 16px;
}

.lang{
  opacity: 0.5;
  font-weight: 600;
  transition: opacity .2s ease;
}

.lang.active{
  opacity: 1;
  font-weight: 800;
}

.lang:hover{
  opacity: 1;
}

.lang-sep{
  opacity: 0.4;
}

/* HERO editorial layout mejorado */

.editorial-section{
  display: flex;
  align-items: flex-start;   /* 🔥 antes center */
  padding-top: 100px;        /* espacio header */
}

.hero-copy{
  max-width: 520px;
  margin-top: 60px;          /* 🔥 sube el bloque */
}

/* HERO Desktop refinado */

@media (min-width: 1024px){

  .editorial-section{
    align-items: flex-start;
    padding-top: 110px;
  }

  .hero-copy{
    margin-top: 20px;   /* 🔥 sube el titular */
  }

  .hero-cta-fashion{
    display: inline-block;
    margin-top: 80px;   /* 🔥 baja el CTA */

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-bottom: 1px solid #000;
    padding-bottom: 4px;

    transition: opacity .2s ease, letter-spacing .2s ease;
  }

  .hero-cta-fashion:hover{
    opacity: .6;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 1024px){

  .editorial-section{
    padding-top: 50px;  /* prueba entre 90–120 */
  }

}

/* CTA HERO MOBILE */

@media (max-width: 768px){

  .hero-cta-fashion{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 22px;
    padding: 10px 18px;

    border-radius: 28px;

    background: var(--blue);
    color: #fff;

    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;

    border-bottom: none;

    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    transition: transform .15s ease, box-shadow .15s ease;
  }

  .hero-cta-fashion:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
  }

  .hero-cta-fashion:active{
    transform: scale(0.96);
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
  }

}

  .main-nav{
    font-size: 14px;
  }

}

/* =========================
   LIGHTBOX PREMIUM (LIMPIO)
========================= */

/* Cerrar */
.lightbox-close{
  position: absolute;
  top: 85px;        /* debajo del header (70px + 15px) */
  right: 22px;
  font-size: 32px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 5;
}

/* Flechas */
.lightbox-nav{
  position: absolute;
  top: calc(50% + 35px); /* compensa padding-top */
  transform: translateY(-50%);
  font-size: 42px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 5;
}

.lightbox-nav.prev{ left: 18px; }
.lightbox-nav.next{ right: 18px; }

/* Contador */
.lightbox-counter{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  letter-spacing: .08em;
  z-index: 5;
}

/* Mobile */
@media (max-width: 768px){
  .lightbox-nav{ display: none; }

  .lightbox-track{
    width: 100vw;
    max-width: 100vw;
  }

  .lightbox-close{
    top: 78px;
    right: 16px;
  }
}

/* Cursor zoom-in catálogo */
.catalog-grid .piece-image img{ cursor: zoom-in; }
.piece-image{ cursor: pointer; }

@media (hover: none){
  .hover-img{ display: none; }
}

.catalog-grid .piece-image img{
  cursor: zoom-in;
}

.piece-image {
  cursor: pointer;
}

@media (hover: none) {
  .hover-img {
    display: none;
  }
}

/* Desktop */
main{
  padding-top: 20px;
}

/* Mobile */
@media (max-width: 768px){
  main{
    padding-top: 10px;
  }
}

/* =========================
   LIGHTBOX LIMPIO DEFINITIVO
========================= */

.image-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.image-lightbox.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(2px);
}

.lightbox-content{
  position: relative;
  width: 92vw;
    height: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .4s ease;
}

.lightbox-track img{
  flex: 0 0 100%;
  width: 100%;
  object-fit: contain;
}

/* ===== LIGHTBOX DOMINIO ABSOLUTO ===== */

html,
body{
  isolation: auto;
}

.image-lightbox{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}

.image-lightbox *{
  z-index: auto !important;
}

.lightbox-content{
  position: relative;
  z-index: 2 !important;
}
.lightbox-close{
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000000;
  cursor: pointer;
  pointer-events: auto;
}

.lightbox-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 42px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000000;
}

.lightbox-nav.prev{
  left: 24px;
}

.lightbox-nav.next{
  right: 24px;
}

#direccion-autocomplete{
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 10px;
}

.pac-container{
  border-radius: 12px !important;
  font-family: inherit !important;
}

/* ================= CART BUTTON ================= */

.cart-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;

  border-radius:50%;
  background:#f3f3f3;

  text-decoration:none;
  transition:all .2s ease;
}

.cart-icon:hover{
  background:#e9e9e9;
}

/* icono */

.cart-icon svg{
  width:18px;
  height:18px;
}

/* contador */

.cart-count{
  position:absolute;
  top:-5px;
  right:-5px;

  min-width:16px;
  height:16px;

  padding:0 4px;

  font-size:10px;
  font-weight:700;

  background:#000;
  color:#fff;

  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= CART PANEL ================= */

.cart-panel{
 position:fixed;
 inset:0;
 z-index:9999;
 display:none;
}

.cart-panel.is-open{
 display:block;
}

.cart-backdrop{
 position:absolute;
 inset:0;
 background:rgba(0,0,0,.35);
 backdrop-filter:blur(2px);
}

/* Drawer */

.cart-drawer{
 position:absolute;
 right:0;
 top:0;
 height:100%;
 width:420px;
 max-width:100%;
 background:#fff;
 padding:40px 36px;
 box-shadow:-20px 0 50px rgba(0,0,0,.15);
 display:flex;
 flex-direction:column;
}

/* Header */

.cart-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:30px;
}

.cart-header h3{
 font-family:'Plus Jakarta Sans',sans-serif;
 font-size:22px;
 font-weight:700;
}

.cart-close{
 background:none;
 border:none;
 font-size:26px;
 cursor:pointer;
 line-height:1;
}

/* Items */

.cart-items{
 flex:1;
 overflow:auto;
}

.cart-item{
 display:flex;
 gap:14px;
 margin-bottom:22px;
 align-items:center;
}

.cart-item img{
 width:64px;
 height:auto;
 border-radius:10px;
}

.cart-item strong{
 font-weight:600;
 display:block;
}

.cart-item div{
 font-size:14px;
 opacity:.7;
}

/* Footer */

.cart-footer{
 border-top:1px solid #eee;
 padding-top:20px;
}

.cart-total-row{
 display:flex;
 justify-content:space-between;
 font-size:18px;
 margin-bottom:18px;
}

.cart-note{
 font-size:13px;
 opacity:.6;
 margin-top:12px;
}

.cart-drawer{
 transform:translateX(100%);
 transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.cart-panel.is-open .cart-drawer{
 transform:translateX(0);
}

.cart-qty{
 display:flex;
 align-items:center;
 gap:8px;
 margin-top:4px;
}

.cart-plus,
.cart-minus{
 width:22px;
 height:22px;
 border-radius:50%;
 border:1px solid #ddd;
 background:white;
 cursor:pointer;
 font-size:14px;
}

.cart-remove{
 border:none;
 background:none;
 font-size:12px;
 opacity:.6;
 cursor:pointer;
 margin-left:8px;
}

.form-row{
display:flex;
gap:12px;
}

.form-row .form-group{
flex:1;
}

.header-actions{
 display:flex;
 align-items:center;
 gap:22px;
}

@media (max-width:768px){

.lang-switch{
 display:none;
}

}

.nav-right{
  display:flex;
  align-items:center;
  gap:18px;
}

@media (max-width:768px){

.nav-left{
  display:none;
}

.lang-switch{
  display:none;
}

}

.mobile-only{
  display:none;
}

@media (max-width:768px){

  .mobile-only{
    display:block;
  }

}

.piece-ctas{
 display:flex;
 gap:10px;
 margin-top:10px;
}

/* base común */
.piece-cta,
.piece-cta-outline{
  margin-top:6px;
  padding:8px 16px;
  border-radius:999px;

  font-size:14px;
  font-weight:700;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  line-height:1;
}

/* botón principal */
.piece-cta{
  background:var(--blue);
  color:#fff;
  border:2px solid var(--blue);
}

.piece-cta:hover{
  background:#fff;
  color:var(--blue);
}

/* botón carrito */
.piece-cta-outline{
  background:#fff;
  border:2px solid #6ea0c8;
  color:#6ea0c8;
}

.piece-cta-outline:hover{
  background:#6ea0c8;
  color:#fff;
}
.cart-mini{
 width:16px;
 height:16px;
 margin-right:6px;
}

/* CTAs principales */
button,
.piece-cta,
.piece-cta-outline,
.cta-main,
.cart-checkout {
  cursor: pointer;
}

/* disabled */
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cta-main:hover,
.piece-cta:hover,
.cart-checkout:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* =========================
   MODAL PREPAGO TIPOGRAFÍA
========================= */

.modal-copy {
  font-size: 14px;
  line-height: 1.4;
  color: #555;
  margin-bottom: 16px;
  pointer-events: none;
}

.modal-copy strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}

/* FILAS */
.prepago-summary .cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 6px;
  color: #333;
}

/* TOTAL */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

/* RGPD */
.rgpd-group {
  margin-top: 16px;
  font-size: 13px;
  color: #666;
}

.rgpd-group a {
  text-decoration: underline;
}

/* NOTA PASARELA */
.prepago-note {
  font-size: 13px;
  color: #777;
  margin: 12px 0 20px;
  line-height: 1.4;
}

.prepago-summary {
  margin-top: 10px;
}

.mobile-menu{
  display: none;

  position: fixed;          /* 🔥 CAMBIO CLAVE */
  top: 72px;                /* 👈 altura de tu header */
  left: 0;
  right: 0;

  background: #fff;
  padding: 20px;

  box-shadow: 0 10px 30px rgba(0,0,0,.1);
  z-index: 999;             /* debajo del header (1000) */
}

.mobile-menu.is-open{
  display:flex;
  flex-direction: column;
  gap: 16px;
}