/* ==========================================================================
   Bolsas Alcantar — hoja de estilos única
   Paleta: Vino Rosa · Rosa Detalle · Oro Artesanal · Café Profundo · Crema Lino
   ========================================================================== */

:root {
  --vino:        #8C2340;
  --vino-osc:    #6E1B32;
  --rosa:        #C75B7F;
  --oro:         #B08D57;
  --oro-claro:   #D4B483;
  --cafe:        #3E322A;
  --cafe-suave:  #6B5A4C;
  --crema:       #F7F1E8;
  --crema-osc:   #EDE3D5;
  --blanco:      #FFFFFF;

  --serif:  "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:   "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --script: "Dancing Script", "Segoe Script", cursive;

  --contenedor: 1180px;
  --gutter: 24px;
  --radio: 4px;

  --banda-y: clamp(64px, 9vw, 128px);
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cafe);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--vino);
  line-height: 1.18;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); }

p { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--vino); }

:focus-visible {
  outline: 3px solid var(--vino);
  outline-offset: 3px;
  border-radius: 2px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vino);
  color: var(--blanco);
  padding: 12px 20px;
  z-index: 200;
}
.salta-al-contenido:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------- utilidades */
.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.banda { padding-block: var(--banda-y); }
.banda--crema { background: var(--crema); }
.banda--vino  { background: var(--vino); color: var(--crema); }

.filete {
  width: 44px;
  height: 3px;
  background: var(--vino);
  border: 0;
  margin: 0 0 22px;
}
.filete--centro { margin-inline: auto; }
.filete--rosa { background: var(--rosa); }
.filete--claro { background: var(--oro-claro); }

.antetitulo {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 700;
  margin: 0 0 14px;
}

.centrado { text-align: center; }
.centrado .filete { margin-inline: auto; }
.centrado p { margin-inline: auto; }

.plomo {
  font-size: 1.1rem;
  color: var(--cafe-suave);
}

.slogan {
  font-family: var(--script);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--rosa);
  line-height: 1.2;
  margin: 0 0 18px;
}

/* --------------------------------------------------------- botones */
.boton {
  display: inline-block;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--radio);
  border: 2px solid var(--vino);
  background: var(--vino);
  color: var(--blanco);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.boton:hover { background: var(--vino-osc); border-color: var(--vino-osc); }

.boton--linea {
  background: transparent;
  color: var(--vino);
}
.boton--linea:hover { background: var(--vino); color: var(--blanco); }

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

.boton--bloque { display: block; width: 100%; text-align: center; }

.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
/* La segunda forma es para cuando ambas clases van en el mismo elemento. */
.centrado .botonera,
.centrado.botonera { justify-content: center; }

/* --------------------------------------------------------- encabezado */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  border-bottom: 1px solid var(--crema-osc);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 78px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cafe);
}
.marca img { width: 52px; height: 52px; border-radius: 50%; }
.marca__nombre {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--vino);
  line-height: 1.1;
}
.marca__firma {
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cafe-suave);
  font-weight: 400;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cafe);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--vino); border-bottom-color: var(--rosa); }
.nav a[aria-current="page"] { color: var(--vino); border-bottom-color: var(--vino); }
/* Gana en especificidad a `.nav a`, que si no le quita el padding al botón. */
.nav a.boton {
  padding: 12px 22px;
  text-transform: none;
  letter-spacing: .03em;
  border: 2px solid var(--vino);
  color: var(--blanco);
}
.nav a.boton:hover { color: var(--blanco); border-color: var(--vino-osc); }

.menu-boton {
  display: none;
  background: none;
  border: 1px solid var(--crema-osc);
  border-radius: var(--radio);
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cafe);
  cursor: pointer;
}

/* --------------------------------------------------------- hero */
.hero { padding-block: clamp(48px, 7vw, 96px); }
.hero__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__foto {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
}
.hero h1 { margin-bottom: .35em; }
/* La foto del hero y su aviso viajan juntos: el envoltorio les da el mismo ancho. */
.hero__media { display: grid; }

/* --------------------------------------------------------- pilares */
.pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3.5vw, 46px);
  margin-top: 52px;
}
.pilar h3 { margin-bottom: .4em; }
.pilar p { font-size: .96rem; margin-bottom: 0; color: var(--cafe-suave); }

/* --------------------------------------------------------- rejilla productos */
.familia { margin-top: 72px; }
.familia:first-of-type { margin-top: 0; }
.familia__titulo {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-bottom: 1px solid var(--crema-osc);
  padding-bottom: 14px;
  margin-bottom: 40px;
}
.familia__titulo h2 { margin: 0; }
.familia__num {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--oro);
  font-weight: 700;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 42px);
}
.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--crema-osc);
  border-radius: var(--radio);
  overflow: hidden;
}
.tarjeta img { width: 100%; height: auto; }
.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 26px;
}
.tarjeta h3 { margin-bottom: .3em; }
.tarjeta__linea {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 700;
  margin: 0 0 10px;
}
.tarjeta p { font-size: .95rem; margin-bottom: 1em; color: var(--cafe-suave); }
.tarjeta__elige {
  font-size: .88rem;
  border-top: 1px solid var(--crema-osc);
  padding-top: 14px;
  margin: auto 0 18px;
  color: var(--cafe-suave);
}
.tarjeta__elige strong { color: var(--cafe); font-weight: 700; }

/* --------------------------------------------------------- listas */
.lista { list-style: none; margin: 0 0 1.2em; padding: 0; }
.lista li {
  position: relative;
  padding-left: 20px;
  margin-bottom: .5em;
  max-width: 62ch;
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--rosa);
}
.banda--vino .lista li::before { background: var(--oro-claro); }

/* --------------------------------------------------------- dos columnas */
.dos-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dos-col--texto-der > :first-child { order: 2; }

.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px;
  margin-top: 44px;
}
.valor__nombre {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vino);
  margin: 0 0 .2em;
}
.valor p { font-size: .93rem; margin: 0; color: var(--cafe-suave); }

/* --------------------------------------------------------- contacto */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 34px;
  margin-top: 8px;
}
.dato__rotulo {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 700;
  margin: 0 0 6px;
}
.dato p { margin: 0; font-size: 1.02rem; }
.dato a { text-decoration: none; font-weight: 700; }
.dato a:hover { text-decoration: underline; }

.formulario {
  background: var(--blanco);
  border: 1px solid var(--crema-osc);
  border-radius: var(--radio);
  padding: clamp(26px, 4vw, 44px);
}
.campo { margin-bottom: 20px; }
.campo label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 7px;
  color: var(--cafe);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--cafe);
  background: var(--blanco);
  border: 1px solid #C9BCAC;
  border-radius: var(--radio);
  padding: 12px 14px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--vino); }
.campo__ayuda { font-size: .84rem; color: var(--cafe-suave); margin: 6px 0 0; }

.aviso-form {
  font-size: .9rem;
  color: var(--cafe-suave);
  margin: 18px 0 0;
}

/* --------------------------------------------------------- pie */
.pie {
  background: var(--cafe);
  color: var(--crema);
  padding-block: clamp(52px, 7vw, 84px) 30px;
}
.pie a { color: var(--crema); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__marca { text-align: center; margin-bottom: 54px; }
.pie__marca img { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px; }
.pie__marca .slogan { margin: 0; }

.pie__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
}
.pie__rotulo {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-claro);
  font-weight: 700;
  margin: 0 0 12px;
}
.pie__lista { list-style: none; margin: 0; padding: 0; }
.pie__lista li { margin-bottom: .45em; font-size: .96rem; }

.pie__base {
  border-top: 1px solid rgba(212, 180, 131, .3);
  margin-top: 46px;
  padding-top: 24px;
  text-align: center;
  font-size: .85rem;
  color: var(--oro-claro);
}
.pie__base p { margin: 0; max-width: none; }

/* --------------------------------------------------------- WhatsApp flotante */
.wa-flotante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--vino);
  box-shadow: 0 6px 20px rgba(62, 50, 42, .32);
  transition: background-color .18s ease, transform .18s ease;
}
.wa-flotante:hover { background: var(--vino-osc); transform: translateY(-2px); }
.wa-flotante svg { width: 30px; height: 30px; fill: var(--blanco); }

/* --------------------------------------------------------- responsivo */
@media (max-width: 900px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .pilares { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  body { font-size: 16px; }

  .menu-boton { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--crema-osc);
    padding: 8px 24px 22px;
  }
  .nav[data-abierto="true"] { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--crema-osc);
  }
  .nav a:hover { border-bottom-color: var(--crema-osc); }
  .nav .boton { margin-top: 16px; text-align: center; border: 2px solid var(--vino); }

  .hero__rejilla,
  .dos-col { grid-template-columns: 1fr; }
  .dos-col--texto-der > :first-child { order: 0; }
  .hero__foto { max-width: 420px; margin-inline: auto; }

  .botonera .boton { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 560px) {
  .rejilla,
  .pilares { grid-template-columns: 1fr; }
  .rejilla { max-width: 420px; margin-inline: auto; }
  .familia__titulo { flex-direction: column; gap: 4px; align-items: flex-start; }
}

@media (max-width: 460px) {
  /* Que la firma del logotipo no parta el encabezado en dos renglones. */
  .marca img { width: 44px; height: 44px; }
  .marca__nombre { font-size: 1rem; }
  .marca__firma { font-size: .55rem; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------- aviso de imagen ilustrativa
   Las fotos del catálogo son recreaciones hechas a partir de las piezas
   reales del taller. El sello va sobre cada foto y la nota completa, una
   vez por página, donde el cliente la lee antes de escribir. */
.foto-ilustrativa { position: relative; }

.sello-ilustrativa {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--crema);
  background: rgba(62, 50, 42, .72);
  padding: 5px 11px;
  border-radius: 2px;
}

.nota-ilustrativa {
  font-size: .88rem;
  color: var(--cafe-suave);
  max-width: 62ch;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--crema-osc);
}
/* En el hero la nota va justo bajo la foto y toma su mismo ancho. */
.nota-ilustrativa--hero { margin-top: 20px; max-width: none; }

.banda--vino .nota-ilustrativa {
  color: var(--crema);
  border-top-color: rgba(212, 180, 131, .35);
}

/* --------------------------------------------------------- nota del catálogo
   Aclara la diferencia entre el catálogo del sitio (los modelos) y el que se
   manda por WhatsApp (lo que queda hoy). Va bajo los dos botones. */
.nota-catalogo {
  font-size: .88rem;
  color: var(--cafe-suave);
  max-width: 54ch;
  margin: 18px auto 0;
}

/* --------------------------------------------------------- piezas limitadas */
.limitadas {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--oro);
  border: 1px solid var(--oro-claro);
  border-radius: 999px;
  padding: 9px 20px;
  margin: 4px 0 0;
  max-width: none;
}

/* La foto del hero se estrecha en móvil: el ancho va en el envoltorio para
   que el sello siga pegado a la esquina de la imagen y no del hueco. */
@media (max-width: 780px) {
  .hero__media { max-width: 420px; margin-inline: auto; }
}

@media (max-width: 560px) {
  /* A dos renglones la pastilla se estira de más; se lee mejor como placa. */
  .limitadas { border-radius: 12px; letter-spacing: .1em; }
}

/* --------------------------------------------------------- movimiento
   Entradas al aparecer en pantalla y respuestas al pasar el cursor. Se ven
   sin buscarlas, pero nada dura más de 1s ni se desplaza más de 44 px. El
   bloque `prefers-reduced-motion` de arriba las anula con !important, y
   además el JS no oculta nada si se pidió menos movimiento. */

html { scroll-behavior: smooth; }

/* Entrada al entrar en pantalla. El JS solo marca lo que está bajo el
   pliegue, así que nunca parpadea lo que ya se estaba viendo. Sin JS no se
   oculta nada: la clase la pone el script, no el HTML. */
.aparece { opacity: 0; transform: translateY(38px) scale(.97); }
.aparece--visible {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.16, .84, .44, 1) var(--retraso, 0s),
              transform .9s cubic-bezier(.16, .84, .44, 1) var(--retraso, 0s);
}

/* El hero entra solo al cargar: es CSS puro, no espera al script. */
.hero__rejilla > * { animation: subir 1s cubic-bezier(.16, .84, .44, 1) backwards; }
.hero__rejilla > *:nth-child(2) { animation-delay: .28s; }

@keyframes subir {
  from { opacity: 0; transform: translateY(44px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* El encabezado cambia el filete por una sombra al bajar. */
.cabecera { transition: box-shadow .3s ease, border-bottom-color .3s ease; }
.cabecera[data-scroll="true"] {
  box-shadow: 0 6px 24px rgba(62, 50, 42, .10);
  border-bottom-color: transparent;
}

/* El menú de móvil se despliega en lugar de aparecer de golpe. */
.nav[data-abierto="true"] { animation: desplegar .26s ease backwards; }

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* El botón de WhatsApp llega al final, cuando la página ya se ve. */
.wa-flotante { animation: entrar-wa .45s .7s cubic-bezier(.22, .61, .36, 1) backwards; }

@keyframes entrar-wa {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: none; }
}

.tarjeta { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.tarjeta img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.marca img { transition: transform .35s ease; }
.boton:active { transform: translateY(0); box-shadow: none; }

/* Solo con ratón: en pantallas táctiles el :hover se queda pegado. */
@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(62, 50, 42, .18);
    border-color: var(--oro-claro);
  }
  /* La tarjeta recorta el desbordamiento, así que el acercamiento no la crece. */
  .tarjeta:hover img { transform: scale(1.075); }

  .boton:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(62, 50, 42, .26); }
  .marca:hover img { transform: rotate(-4deg) scale(1.05); }
}

/* El subrayado del menú crece de izquierda a derecha (solo en escritorio,
   donde el menú es una fila y hay cursor). */
@media (hover: hover) and (min-width: 781px) {
  .nav a:not(.boton) { position: relative; }
  .nav a:not(.boton):hover { border-bottom-color: transparent; }
  .nav a:not(.boton)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--rosa);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  }
  .nav a:not(.boton):hover::after { transform: scaleX(1); }
}