/* ═══════════════════════════════════════════════════════════════
   MOREAMORE — Home · Hoja de estilos del prototipo
   ═══════════════════════════════════════════════════════════════
   Los tokens de :root son la fuente de verdad del Sistema
   Cromático Extendido. En la fase WordPress se traducen 1:1 a
   theme.json → settings.color.palette. No usar hex sueltos en
   las secciones: siempre var(--mm-*).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Principales ── */
  --mm-morado:        #8B3089;   /* Morado moreAmore */
  --mm-coral:         #FC5959;   /* Coral Amore */
  --mm-gris:          #8E8E8E;   /* Gris Soporte */

  /* ── Derivados profundos (hero, footer) ── */
  --mm-uva:           #5A1E5A;   /* Uva Profunda */
  --mm-ciruela:       #2A0F2C;   /* Ciruela Noche */
  --mm-mora:          #3A173D;   /* Mora Sombra */
  --mm-vino:          #6F2468;   /* Vino Amore */

  /* ── Derivados suaves (fondos de tarjeta, hovers) ── */
  --mm-lila:          #E9D4E8;   /* Lila Suspiro */
  --mm-rosa-bruma:    #F8EAF4;   /* Rosa Bruma */
  --mm-malva:         #CFA7CA;   /* Malva Sereno */
  --mm-rubor:         #F7C6D8;   /* Rubor Amore */
  --mm-coral-suave:   #FFB2A9;   /* Coral Suave */
  --mm-coral-palido:  #FFE2DF;   /* Coral Pálido */

  /* ── Neutros cálidos ── */
  --mm-blanco-perla:  #FFFFFF;
  --mm-perla-calida:  #FFF7F8;
  --mm-marfil:        #FFF3EB;
  --mm-arena:         #F5EDE7;
  --mm-gris-nube:     #F4F2F4;
  --mm-gris-seda:     #D9D3DA;
  --mm-gris-texto:    #4B404B;
  --mm-grafito:       #211C24;

  /* ── Funcionales UI ── */
  --mm-morado-accion: #732471;
  --mm-coral-accion:  #D9484A;

  /* ── Tipografía (Manual de Marca · sección 4) ── */
  --font-base: 'Montserrat', -apple-system, sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif; /* acento itálico del mockup — validar con cliente */

  /* ── Métricas ── */
  --container: 1240px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 4px 22px rgba(90, 30, 90, 0.08);
  --shadow-card-hover: 0 10px 34px rgba(90, 30, 90, 0.16);
  --header-h: 76px;
}

/* ═══ Base ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  color: var(--mm-gris-texto);
  background: var(--mm-perla-calida);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Títulos de sección (patrón repetido en todo el body) */
.section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--mm-grafito);
  margin-bottom: 4px;
}

.section-sub {
  font-size: 13.5px;
  color: var(--mm-gris);
  margin-bottom: 22px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.section-head .section-title { margin-bottom: 0; }

.link-all {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mm-coral);
  white-space: nowrap;
  transition: opacity 0.2s;
}
.link-all:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════
   HEADER · sin buscador (la búsqueda entra por Amore)
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  transition: background 0.3s, box-shadow 0.3s;
}

.site-header.scrolled {
  background: rgba(42, 15, 44, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.25);
}

.header-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.header-logo img { height: 44px; width: auto; }

/* Navegación: ocupa el espacio que dejó el buscador */
.header-nav {
  display: flex;
  gap: 26px;
}
.header-nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: 4px 0;
  transition: color 0.2s;
}
.header-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--mm-coral);
  transition: width 0.25s;
}
.header-nav a:hover { color: #fff; }
.header-nav a:hover::after { width: 100%; }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s;
}
.header-icon-btn:hover { background: rgba(255,255,255,0.12); }

.header-icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--mm-coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.header-account {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background 0.2s;
}
.header-account:hover { background: rgba(255,255,255,0.12); }

/* ═══════════════════════════════════════════════════════════════
   HERO · eje vertical centrado · Amore + chat = un solo objeto
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, rgba(139, 48, 137, 0.30), transparent 68%),
    linear-gradient(180deg, var(--mm-ciruela) 0%, var(--mm-mora) 45%, var(--mm-ciruela) 100%);
  padding: calc(var(--header-h) + 26px) 0 72px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero-bg.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  pointer-events: none;
}

/* Viñeta: oscurece bordes y base para que texto y chat respiren */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 50%, transparent 30%, rgba(42,15,44,0.55) 100%),
    linear-gradient(0deg, rgba(42,15,44,0.72) 0%, transparent 32%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Intro (eyebrow + titular + lead) ──
   Bloque que se transforma al entrar en modo conversación:
   ver .hero.is-chatting al final de esta sección. */
.hero-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: align-items 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 1. Eyebrow: nombra al agente ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
  transition: opacity 0.4s, max-height 0.55s cubic-bezier(0.4,0,0.2,1),
              padding 0.5s, margin 0.5s, border-color 0.4s;
  max-height: 40px;
  overflow: hidden;
}
.hero-eyebrow strong { color: #fff; font-weight: 700; }

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-coral);
  box-shadow: 0 0 0 0 rgba(252, 89, 89, 0.7);
  animation: dot-pulse 2s ease-out infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(252,89,89,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(252,89,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(252,89,89,0); }
}

/* ── 2. Headline ── */
.hero-title {
  margin-top: 20px;
  font-size: clamp(30px, 4.1vw, 50px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 16ch;
  text-align: center;
  transition: font-size 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.5s, text-align 0.3s, opacity 0.4s;
}
.hero-title .accent {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--mm-coral);
}

/* ── 3. Lead ── */
.hero-lead {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 50ch;
  text-align: center;
  max-height: 90px;
  overflow: hidden;
  transition: opacity 0.35s, max-height 0.55s cubic-bezier(0.4,0,0.2,1), margin 0.5s;
}
.hero-lead span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ── 4. Escenario: Amore con la conversación a los lados ──
   --amore-size es la ÚNICA medida que hay que tocar: de ella
   derivan el canvas, la franja central despejada y los canales.

   Los márgenes negativos existen porque el canvas tiene borde
   transparente alrededor del aro. Solapar ese aire con los vecinos
   permite un anillo mucho más grande sin desbordar el alto de
   pantalla.

   NOTA: el factor de --clear se midió simulando la física real del
   motor v6.1 (R = 0.19, BUOY 0.85): el fuego visible ocupa ~82% del
   canvas, así que 0.84 deja las burbujas justo fuera de las llamas. */
.hero-stage {
  --amore-size: min(66vh, 780px);
  --clear: calc(var(--amore-size) * 0.84);   /* aro + llamas extendidas */
  --channel: calc((100% - var(--clear)) / 2 - 14px);

  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  margin-top: -2vh;
}

#amore-canvas {
  width: var(--amore-size);
  height: var(--amore-size);
  margin: -9vh 0 -8vh;      /* recorta el aire, no el anillo */
}

/* ── La conversación NUNCA tapa a Amore ──
   El chat-log cubre todo el escenario, pero las burbujas se limitan
   a los CANALES LATERALES: Amore responde por la izquierda, el
   usuario escribe por la derecha, y el centro —donde vive el
   anillo— queda siempre despejado. (Medidas: ver .hero-stage) */

.chat-log {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;           /* lo nuevo, abajo */
  gap: 10px;
  overflow-y: auto;
  padding: 44px 0 2px;
  text-align: left;
  scrollbar-width: none;
  pointer-events: none;                /* no bloquea el escenario */
  /* Los mensajes viejos se disuelven hacia arriba */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 46px);
  mask-image: linear-gradient(180deg, transparent 0, #000 46px);
}
.chat-log::-webkit-scrollbar { display: none; }

.bubble {
  padding: 11px 14px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.5;
  max-width: var(--channel);           /* ← clave: nunca invade el centro */
  pointer-events: auto;
  animation: bubble-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Entran desde su propio lado: refuerza la lectura de "canal" */
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bubble.amore {
  align-self: flex-start;
  background: rgba(30, 10, 32, 0.72);
  border: 1px solid rgba(233, 212, 232, 0.20);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.94);
  border-bottom-left-radius: 5px;
}
.bubble.amore .who {
  display: block;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--mm-rubor);
}

.bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--mm-coral) 0%, #E0447F 100%);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 18px rgba(252, 89, 89, 0.28);
}

/* Variante clara (respuestas largas): mantiene legibilidad */
.bubble.amore.light {
  background: rgba(255, 247, 248, 0.95);
  color: var(--mm-gris-texto);
  border: none;
}
.bubble.amore.light .who { color: var(--mm-morado); }

.bubble .time {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  opacity: 0.5;
}

/* ═══ MODO CONVERSACIÓN ═══════════════════════════════════════
   Se activa al primer mensaje del usuario (clase .is-chatting).
   La marca cede protagonismo al agente: el titular se encoge y se
   va a la izquierda, la intro secundaria se retira, y el escenario
   se lleva el espacio liberado. Todo con transiciones: se percibe
   como que la página "se acomoda" para conversar.
   ═══════════════════════════════════════════════════════════════ */
.hero.is-chatting .hero-intro {
  align-items: flex-start;
}

.hero.is-chatting .hero-eyebrow {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-color: transparent;
}

.hero.is-chatting .hero-title {
  font-size: clamp(17px, 1.9vw, 23px);
  max-width: 34ch;
  margin-top: 0;
  text-align: left;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);
}
/* En una sola línea: pasa a ser una firma de marca, no un titular */
.hero.is-chatting .hero-title .accent {
  display: inline;
}

.hero.is-chatting .hero-lead {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}

/* El escenario sube y gana aire; el anillo mantiene su tamaño
   para que Amore se vea viva respondiendo en todo momento. */
.hero.is-chatting .hero-stage {
  margin-top: -6px;
}

/* ── 5. Composer: el CTA real del home ── */
.hero-composer {
  width: min(660px, 100%);
  margin-top: 18px;
  transition: margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 7px 7px 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.chat-input-row:focus-within {
  border-color: rgba(252, 89, 89, 0.7);
  box-shadow: 0 8px 30px rgba(0,0,0,0.22), 0 0 34px rgba(252, 89, 89, 0.22);
}

.composer-spark {
  flex-shrink: 0;
  color: var(--mm-rubor);
  opacity: 0.9;
}

#chat-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  padding: 6px 0;
}
#chat-input::placeholder { color: rgba(255, 255, 255, 0.5); }

#chat-send {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--mm-coral), var(--mm-morado));
  transition: transform 0.15s, box-shadow 0.2s;
}
#chat-send:hover {
  transform: scale(1.07);
  box-shadow: 0 0 22px rgba(252, 89, 89, 0.5);
}

/* Chips: eliminan la parálisis de "no sé qué escribir" */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.chip:hover {
  background: rgba(252, 89, 89, 0.18);
  border-color: rgba(252, 89, 89, 0.55);
  color: #fff;
  transform: translateY(-1px);
}

.composer-hint {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  max-height: 40px;
  overflow: hidden;
  transition: opacity 0.35s, max-height 0.5s, margin 0.5s;
}
/* Al conversar ya no hace falta explicar qué hace Amore */
.hero.is-chatting .composer-hint {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}

/* Indicador de scroll */
.hero-scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.45);
  animation: hint-bob 2.2s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN · Explora por ocasión
   ═══════════════════════════════════════════════════════════════ */
.ocasiones { padding: 56px 0 44px; }

.ocasiones-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}

.ocasion-card {
  background: var(--mm-blanco-perla);
  border: 1px solid var(--mm-gris-nube);
  border-radius: var(--radius);
  padding: 20px 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.ocasion-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--mm-rubor);
}
.ocasion-card img { width: 54px; height: 54px; object-fit: contain; }
.ocasion-card span {
  font-size: 12px;
  font-weight: 600;
  color: var(--mm-gris-texto);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN · Sugerencias para ti
   ═══════════════════════════════════════════════════════════════ */
.sugerencias { padding: 12px 0 52px; }

.sugerencias-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.35fr;
  gap: 16px;
  align-items: stretch;
}

.product-card {
  background: var(--mm-blanco-perla);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.product-media {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }

.product-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  color: var(--mm-morado);
  transition: color 0.2s, transform 0.15s;
}
.product-fav:hover { color: var(--mm-coral); transform: scale(1.1); }
/* Guardado. El corazón de las tarjetas (.card-fav) ya tenía su estado en
   shop.css; este no, porque el botón nunca llegó a guardar nada — era markup
   sin JavaScript detrás. Al conectarlo hizo falta completar el par. */
.product-fav.on { color: var(--mm-coral); }
.product-fav.on svg { fill: currentColor; }

.product-info { padding: 12px 14px 14px; }
.product-name { font-size: 13px; font-weight: 500; color: var(--mm-grafito); }
.product-meta {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.product-price { font-size: 14.5px; font-weight: 700; color: var(--mm-grafito); }
.product-rating { font-size: 11px; color: var(--mm-gris); }

/* Card destacada: regalos corporativos */
.corporativos-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(200deg, rgba(139,48,137,0.10) 0%, rgba(42,15,44,0.82) 78%),
    linear-gradient(135deg, var(--mm-lila), var(--mm-malva));
  min-height: 100%;
  transition: transform 0.22s, box-shadow 0.22s;
}
.corporativos-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.corporativos-body {
  position: relative;
  padding: 22px;
  color: #fff;
}
.corporativos-body h3 { font-size: 18px; font-weight: 600; }
.corporativos-body p {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
.btn-corporativos {
  margin-top: 14px;
  display: inline-block;
  padding: 9px 20px;
  border: none;
  border-radius: 999px;
  background: var(--mm-coral);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}
.btn-corporativos:hover { background: var(--mm-coral-accion); transform: scale(1.03); }

/* ═══════════════════════════════════════════════════════════════
   ¿POR QUÉ ELEGIR MOREAMORE? · contenida, como en el PDF
   ═══════════════════════════════════════════════════════════════ */
.porque {
  margin: 20px 0 0;
  padding: 44px 24px 60px;
}

.porque-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--mm-uva) 0%, var(--mm-morado) 48%, #B0387F 100%);
  box-shadow: var(--shadow-card-hover);
  color: #fff;
}

.porque h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 30px;
}

.porque-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.porque-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 14px;
}
.porque-item + .porque-item { border-left: 1px solid rgba(255,255,255,0.20); }

.porque-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
}
.porque-icon img { width: 100%; height: 100%; object-fit: contain; }

.porque-item h3 { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.porque-item p {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.80);
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN · El detalle que buscas (categorías)
   ═══════════════════════════════════════════════════════════════ */
.categorias { padding: 52px 0; }

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}

.categoria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.categoria-item:hover { background: var(--mm-rosa-bruma); }

.categoria-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--mm-rosa-bruma);
  border: 1.5px solid var(--mm-lila);
  display: grid;
  place-items: center;
  transition: transform 0.22s, border-color 0.22s, background 0.22s;
}
.categoria-item:hover .categoria-circle {
  transform: scale(1.07);
  border-color: var(--mm-morado);
  background: var(--mm-blanco-perla);
}
.categoria-circle img { width: 42px; height: 42px; object-fit: contain; }

.categoria-item span {
  font-size: 11px;
  font-weight: 600;
  color: var(--mm-gris-texto);
  text-align: center;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN · Calendario de fechas especiales
   ═══════════════════════════════════════════════════════════════ */
.calendario { padding: 6px 0 56px; }

.calendario-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 40px 44px;
  color: #fff;
  background:
    linear-gradient(95deg, rgba(90, 30, 90, 0.92) 0%, rgba(111, 36, 104, 0.72) 55%, rgba(139, 48, 137, 0.45) 100%),
    url('../img/calendario-bg.webp') center / cover;
  box-shadow: var(--shadow-card-hover);
}

.calendario-copy h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.calendario-copy .cal-sub {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mm-rubor);
}
.calendario-copy .cal-countdown {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

.btn-outline {
  margin-top: 20px;
  display: inline-block;
  padding: 11px 26px;
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: #fff; color: var(--mm-uva); }

/* Widget de calendario — estilo dashboard/tech, no "tarjeta de marketplace".
   La fecha destacada rompe la grilla: es el elemento hero del widget. */
.mini-cal {
  background: rgba(20, 6, 22, 0.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  min-width: 320px;
}

.mini-cal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mini-cal-month {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
}
.mini-cal-year {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}

.mini-cal-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
}

/* ── El número protagonista ── */
.mini-cal-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.12);
}

.feature-ring {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(252, 89, 89, 0.45);
  box-shadow:
    0 0 0 1px rgba(252, 89, 89, 0.12),
    0 0 26px rgba(252, 89, 89, 0.35),
    inset 0 0 20px rgba(252, 89, 89, 0.10);
  animation: ring-pulse 2.6s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(252,89,89,0.12), 0 0 26px rgba(252,89,89,0.35), inset 0 0 20px rgba(252,89,89,0.10); }
  50%      { box-shadow: 0 0 0 1px rgba(252,89,89,0.20), 0 0 40px rgba(252,89,89,0.55), inset 0 0 26px rgba(252,89,89,0.16); }
}

.feature-num {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 18px rgba(252, 89, 89, 0.8);
}

.feature-label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.02em;
}

/* ── Grilla secundaria: discreta, sólo referencia ── */
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px 0;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mini-cal-grid .dow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.32);
  padding-bottom: 6px;
}
.mini-cal-grid .day {
  padding: 4px 0;
  color: rgba(255,255,255,0.68);
  position: relative;
}
.mini-cal-grid .day.other { color: rgba(255,255,255,0.16); }

/* El 19 en la grilla queda como referencia mínima (un punto),
   ya que el protagonismo real vive en .feature-num */
.mini-cal-grid .day.is-feature {
  color: var(--mm-coral);
  font-weight: 800;
}
.mini-cal-grid .day.is-feature::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mm-coral);
  box-shadow: 0 0 6px rgba(252,89,89,0.9);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ + FOOTER
   ═══════════════════════════════════════════════════════════════ */
.faq-strip {
  background: var(--mm-marfil);
  text-align: center;
  padding: 40px 24px;
}
.faq-strip h2 { font-size: 17px; font-weight: 600; color: var(--mm-grafito); }
.btn-help {
  margin-top: 16px;
  display: inline-block;
  padding: 10px 26px;
  border: 1.5px solid var(--mm-grafito);
  border-radius: 999px;
  background: transparent;
  color: var(--mm-grafito);
  font-size: 13.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-help:hover { background: var(--mm-morado); border-color: var(--mm-morado); color: #fff; }

.site-footer {
  background: var(--mm-ciruela);
  color: rgba(255,255,255,0.85);
}

.footer-tagline {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 18px 24px;
  text-align: center;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.footer-tagline .dot { color: var(--mm-coral); }

.footer-main {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: 32px;
  padding: 46px 24px 40px;
  max-width: var(--container);
  margin: 0 auto;
}

.footer-brand img { height: 46px; width: auto; }
.footer-brand p {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 230px;
}
.btn-footer-app {
  margin-top: 18px;
  display: inline-block;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--mm-morado);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-footer-app:hover { background: var(--mm-vino); }

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a {
  font-size: 12.5px;
  color: rgba(255,255,255,0.62);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--mm-rubor); }

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.2s;
}
.footer-social a:hover { background: var(--mm-coral); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: var(--container);
  margin: 0 auto;
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}
.footer-bottom .legal { display: flex; gap: 18px; }
.footer-bottom a:hover { color: var(--mm-rubor); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .header-nav { display: none; }
  .hero-stage { --amore-size: min(58vh, 560px); }
  .ocasiones-grid { grid-template-columns: repeat(4, 1fr); }
  .sugerencias-grid { grid-template-columns: repeat(3, 1fr); }
  .corporativos-card { grid-column: span 3; min-height: 190px; }
  .porque-inner { padding: 30px 26px; }
  .porque-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .porque-item + .porque-item { border-left: none; }
  .categorias-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

/* Por debajo de ~880px los canales laterales quedan demasiado
   estrechos: la conversación pasa a fluir DEBAJO del anillo, en
   columna única. Amore sigue completamente visible. */
@media (max-width: 880px) {
  .hero-stage {
    --amore-size: min(54vh, 88vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  #amore-canvas { margin: -7vh 0 -6vh; }
  .chat-log {
    position: static;
    inset: auto;
    width: min(560px, 100%);
    max-height: 26vh;
    justify-content: flex-start;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .bubble { max-width: 84%; }
  .hero.is-chatting .hero-stage { margin-top: 0; }
}

@media (max-width: 680px) {
  .header-account span { display: none; }
  .hero { padding-bottom: 56px; }
  .hero-title { max-width: none; }
  .hero-stage { --amore-size: min(50vh, 86vw); }
  #amore-canvas { margin: -6vh 0 -5vh; }
  .chat-log { max-height: 22vh; }
  .bubble { max-width: 90%; font-size: 12.5px; }
  .composer-hint { display: none; }
  .hero.is-chatting .hero-title { font-size: 15px; max-width: none; }
  .chip-row { gap: 6px; }
  .chip { font-size: 11.5px; padding: 7px 12px; }
  .ocasiones-grid { grid-template-columns: repeat(2, 1fr); }
  .sugerencias-grid { grid-template-columns: repeat(2, 1fr); }
  .corporativos-card { grid-column: span 2; }
  .porque-grid { grid-template-columns: 1fr; }
  .categorias-grid { grid-template-columns: repeat(3, 1fr); }
  .calendario-banner { grid-template-columns: 1fr; padding: 30px 24px; }
  .mini-cal { min-width: 0; }
  .mini-cal-body { grid-template-columns: 1fr; justify-items: center; }
  .mini-cal-feature {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 0 0 16px;
    width: 100%;
    justify-content: center;
  }
  .feature-label { text-align: left; }
  .footer-main { grid-template-columns: 1fr; gap: 26px; }
}

/* Pantallas bajas (portátiles 13"–14"): el hero prioriza que el
   composer siempre quede visible sin sacrificar mucho el anillo */
@media (max-height: 880px) and (min-width: 881px) {
  .hero-title { font-size: clamp(26px, 3.4vw, 38px); }
  .hero-lead { font-size: 14px; margin-top: 12px; }
  .hero-lead span { display: none; }
  .hero-stage { --amore-size: min(64vh, 580px); }
  #amore-canvas { margin: -10vh 0 -9vh; }
  .composer-hint { display: none; }
}

/* Pantallas muy bajas (1366x768 y similares): se retira el lead y
   el titular se compacta para que el anillo siga siendo grande sin
   empujar el composer fuera de la vista. */
@media (max-height: 790px) and (min-width: 881px) {
  .hero { padding-top: calc(var(--header-h) + 12px); padding-bottom: 54px; }
  .hero-title { font-size: clamp(24px, 2.9vw, 32px); margin-top: 14px; }
  .hero-lead { display: none; }
  .hero-stage { --amore-size: min(62vh, 510px); }
  #amore-canvas { margin: -10vh 0 -9vh; }
}

/* Accesibilidad: respeta reduced motion en las transiciones CSS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ¿QUIÉN ES AMORE? — pattern "mam/quien-es-amore"
   ═══════════════════════════════════════════════════════════════
   Ajuste solicitado por el cliente tras la aprobación del prototipo.

   Va inmediatamente después del hero porque esa es la pregunta que
   se hace quien acaba de ver una interfaz de chat en la portada de
   una tienda de regalos. Dejarla para más abajo obliga a decidir
   antes de entender.

   Fondo claro entre dos superficies: el hero es oscuro y "Ocasiones"
   es claro, así que un bloque oscuro acá se fundiría con el hero y
   perdería el corte. La lavanda del sistema (el color que el manual
   asigna a IA) marca que es territorio del asistente sin repetir el
   peso visual del hero.

   Los tres puntos van numerados porque describen una secuencia real
   de la conversación, no tres virtudes sueltas. Y el tercero —"te
   dice cuándo no"— es a propósito el que ningún competidor podría
   copiar sin cambiar su modelo de negocio: es el mismo criterio que
   sostiene el bloque de contraindicación de la página de producto.
   ═══════════════════════════════════════════════════════════════ */
.quien-amore {
  padding: 66px 0 70px;
  background: linear-gradient(180deg, var(--mm-blanco-perla) 0%, var(--mm-rosa-bruma) 100%);
  border-bottom: 1px solid var(--mm-gris-nube);
}

.qa-top {
  max-width: 620px;
  margin: 0 auto 44px;
  text-align: center;
}

.qa-orb {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FFE6F2, var(--mm-coral) 46%, var(--mm-morado) 100%);
  box-shadow: 0 10px 30px rgba(139, 48, 137, 0.26);
  animation: qa-breathe 4.5s ease-in-out infinite;
}
@keyframes qa-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(139,48,137,0.26); }
  50%      { transform: scale(1.045); box-shadow: 0 14px 38px rgba(139,48,137,0.34); }
}

.qa-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-morado);
  margin-bottom: 14px;
}

.quien-amore h2 {
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mm-grafito);
}
.quien-amore h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--mm-morado);
}

.qa-lead {
  margin-top: 15px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mm-gris-texto);
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.qa-item {
  padding: 26px 26px 28px;
  border: 1px solid var(--mm-lila);
  border-radius: var(--radius-lg);
  background: var(--mm-blanco-perla);
  transition: border-color 0.24s, transform 0.24s;
}
.qa-item:hover { border-color: var(--mm-malva); transform: translateY(-3px); }

.qa-num {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mm-coral);
  margin-bottom: 14px;
}
.qa-item h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-grafito);
  margin-bottom: 8px;
}
.qa-item p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mm-gris-texto);
}

/* La frase de ejemplo: es la voz de Amore, así que va en la itálica
   con la que habla en todo el sitio. */
.qa-quote {
  margin-top: 14px;
  padding: 11px 13px;
  border-left: 2px solid var(--mm-morado);
  border-radius: 0 8px 8px 0;
  background: var(--mm-rosa-bruma);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-uva);
}

.qa-foot {
  max-width: 620px;
  margin: 34px auto 0;
  text-align: center;
}
.qa-foot p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mm-gris);
}
.btn-qa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: var(--mm-morado);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.22s, transform 0.16s;
}
.btn-qa:hover { background: var(--mm-morado-accion); transform: translateY(-1px); }

@media (max-width: 900px) {
  .qa-grid { grid-template-columns: 1fr; gap: 14px; }
  .quien-amore { padding: 48px 0 52px; }
  .qa-top { margin-bottom: 30px; }
  .qa-item { padding: 22px 22px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTE · Íconos más grandes (revisión del cliente)
   ───────────────────────────────────────────────────────────────
   Los íconos de ocasión, categoría y "por qué elegirnos" estaban
   dimensionados para una grilla más densa. Al subirlos hay que subir
   también el contenedor, o el ícono queda pegado al borde de la
   tarjeta y se lee apretado en vez de generoso.
   ═══════════════════════════════════════════════════════════════ */
.ocasion-card { padding: 24px 10px 18px; gap: 14px; }
.ocasion-card img { width: 74px; height: 74px; }
.ocasion-card span { font-size: 12.5px; }

.categoria-circle { width: 96px; height: 96px; }
.categoria-circle img { width: 56px; height: 56px; }
.categoria-item span { font-size: 11.5px; }
.categorias-grid { gap: 14px; }

.porque-icon { width: 60px; height: 60px; }
.porque-item { gap: 14px; }

@media (max-width: 1080px) {
  .ocasion-card img { width: 66px; height: 66px; }
  .categoria-circle { width: 88px; height: 88px; }
  .categoria-circle img { width: 50px; height: 50px; }
}
@media (max-width: 680px) {
  .ocasion-card img { width: 62px; height: 62px; }
  .categoria-circle { width: 78px; height: 78px; }
  .categoria-circle img { width: 46px; height: 46px; }
  .porque-icon { width: 52px; height: 52px; }
}

/* Cierre de la conversación del hero: la charla desemboca en la
   selección. Sin este paso el chat no lleva a ninguna parte, que es
   exactamente lo contrario de lo que la página promete. */
.go-seleccion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mm-coral), var(--mm-morado));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter 0.2s, transform 0.15s;
}
.go-seleccion:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bubble.bubble-cta { max-width: min(var(--channel), 340px); }