/* ============================================================
   BELLA BERRY — ¿Qué se te antoja hoy? · v2.1.2
   Sistema de diseño Maison: crema · tinta · rosa · salvia
   Fraunces + Instrument Sans · Seccion Studio

   Layout gobernado por el ANCHO DEL CONTENEDOR (container queries),
   no por el viewport: el quiz se adapta igual dentro de una columna
   angosta, de una plantilla ancha o de un móvil.
   ============================================================ */

.bba{
  /* Paleta Maison */
  --bba-crema: #F2EFEC;
  --bba-vainilla: #FBF9F7;
  --bba-tinta: #6E2D47;
  --bba-tinta-honda: #552238;
  --bba-tinta-suave: #95566F;
  --bba-rosa: #C7858F;
  --bba-rosa-honda: #B95B80;
  --bba-peach: #EFB9A8;
  --bba-salvia: #B7DBD3;
  --bba-salvia-honda: #769D90;
  --bba-linea: rgba(110, 45, 71, .24);
  --bba-linea-suave: rgba(110, 45, 71, .12);
  --bba-linea-crema: rgba(242, 239, 236, .28);

  /* Tipo */
  --bba-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --bba-sans: 'Instrument Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Forma y movimiento */
  --bba-arch: 999px 999px 14px 14px;
  --bba-ease: cubic-bezier(.22, 1, .36, 1);

  /* Ritmo interno (se agranda por container query) */
  --bba-pad-x: 22px;
  --bba-pad-y: 38px;

  container-type: inline-size;
  container-name: bba;

  position: relative;
  display: block;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  background: var(--bba-vainilla);
  color: var(--bba-tinta);
  font-family: var(--bba-sans);
  font-size: 1rem;
  line-height: 1.6;
  border: 1px solid var(--bba-linea-suave);
  border-radius: 22px;
  overflow: hidden;
}

/* Resets con :where() → especificidad 0, nunca pisan a las clases del quiz */
:where(.bba, .bba *, .bba *::before, .bba *::after){ box-sizing: border-box; }
:where(.bba button){
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:where(.bba a){ color: inherit; text-decoration: none; }
:where(.bba p, .bba h2, .bba h3, .bba h4){ margin: 0; }

/* Nada de desbordes por palabras largas o cajas rígidas */
.bba, .bba *{ min-width: 0; }
.bba p, .bba h2, .bba h3, .bba h4, .bba span, .bba button, .bba a{
  overflow-wrap: break-word;
}

.bba :focus{ outline: none; }
.bba :focus-visible{ outline: 2px solid var(--bba-rosa-honda); outline-offset: 4px; border-radius: 4px; }
.bba ::selection{ background: var(--bba-rosa); color: var(--bba-vainilla); }

/* ------------------------------------------------------------
   Pantallas
   ------------------------------------------------------------ */

.bba .bba-screen{
  display: none;
  padding: var(--bba-pad-y) var(--bba-pad-x);
}
.bba .bba-screen.is-active{
  display: block;
  animation: bba-screen-in .7s var(--bba-ease) both;
}
@keyframes bba-screen-in{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Etiqueta editorial
   ------------------------------------------------------------ */

.bba .bba-label{
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-weight: 500; font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--bba-tinta-suave);
}
.bba .bba-label__flor{ color: var(--bba-rosa); letter-spacing: 0; }
.bba .bba-label--center{ justify-content: center; }

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */

.bba .bba-btn{
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 100%;
  font-weight: 500; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase;
  text-align: center;
  padding: 15px 30px;
  border: 1px solid var(--bba-tinta);
  border-radius: 999px;
  color: var(--bba-tinta);
  background: transparent;
  transition: background .45s var(--bba-ease), color .45s var(--bba-ease),
              border-color .45s var(--bba-ease);
}
.bba .bba-btn:hover{ background: var(--bba-tinta); color: var(--bba-crema); }
.bba .bba-btn--solid{ background: var(--bba-tinta); color: var(--bba-crema); }
.bba .bba-btn--solid:hover{ background: var(--bba-rosa-honda); border-color: var(--bba-rosa-honda); color: var(--bba-vainilla); }
.bba .bba-btn--rosa{ border-color: var(--bba-rosa-honda); color: var(--bba-rosa-honda); }
.bba .bba-btn--rosa:hover{ background: var(--bba-rosa-honda); color: var(--bba-vainilla); }

.bba .bba-back{
  display: inline-block;
  font-weight: 500; font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bba-tinta-suave);
  padding: 0 0 5px;
  border-bottom: 1px solid var(--bba-linea);
  transition: color .35s var(--bba-ease), border-color .35s var(--bba-ease);
}
.bba .bba-back:hover{ color: var(--bba-rosa-honda); border-color: var(--bba-rosa-honda); }

/* ------------------------------------------------------------
   Intro
   ------------------------------------------------------------ */

.bba .bba-screen--intro{
  background: var(--bba-tinta);
  color: var(--bba-crema);
}
.bba .bba-screen--intro .bba-label{ color: rgba(242, 239, 236, .82); justify-content: center; }
.bba .bba-screen--intro .bba-label__flor{ color: var(--bba-peach); }
.bba .bba-screen--intro .bba-btn--solid{
  background: var(--bba-crema); color: var(--bba-tinta); border-color: var(--bba-crema);
}
.bba .bba-screen--intro .bba-btn--solid:hover{
  background: var(--bba-rosa); border-color: var(--bba-rosa); color: var(--bba-tinta-honda);
}

/* Móvil / columna angosta: una sola columna, centrada */
.bba .bba-intro{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  justify-items: center;
  text-align: center;
}
.bba .bba-intro__arch{
  position: relative;
  width: 100%; max-width: 200px;
  aspect-ratio: 3.2 / 4;
  border: 1px solid var(--bba-linea-crema);
  border-radius: var(--bba-arch);
  background: var(--bba-tinta-honda);
  display: grid; place-items: center;
  padding: 26px 22px;
  animation: bba-arch-breathe 7s ease-in-out infinite;
}
@keyframes bba-arch-breathe{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
.bba .bba-intro__flor{
  position: absolute; top: 12%;
  color: var(--bba-peach);
  font-size: 1rem;
  animation: bba-pulse 1.9s ease-in-out infinite;
}
@keyframes bba-pulse{
  0%, 100%{ opacity: .55; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.18); }
}
.bba .bba-logo{
  display: block;
  width: 100%;
  height: auto;
}
.bba .bba-logo--intro{
  max-width: 118px;
  color: var(--bba-crema);
}
.bba .bba-logo--loading{
  max-width: 84px;
  color: var(--bba-tinta);
}
.bba .bba-intro__hint{
  position: absolute; bottom: 10%;
  width: 100%;
  padding-inline: 8px;
  font-size: .52rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(242, 239, 236, .8);
}
.bba .bba-intro__copy{ width: 100%; }
.bba .bba-intro__title{
  margin: 0 0 16px;
  font-family: var(--bba-serif); font-weight: 360;
  font-size: 2.15rem;
  line-height: 1.06; letter-spacing: -.016em;
  text-wrap: balance;
}
.bba .bba-intro__title em{ font-style: italic; font-weight: 320; color: var(--bba-peach); }
.bba .bba-intro__sub{
  margin: 0 auto 30px;
  max-width: 46ch;
  color: rgba(242, 239, 236, .9);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Preguntas
   ------------------------------------------------------------ */

.bba .bba-q__head{ margin-bottom: 28px; }
.bba .bba-q__paso{
  margin: 0 0 14px;
  font-weight: 500; font-size: .66rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--bba-tinta-suave);
}
.bba .bba-q__paso i{ font-style: normal; color: var(--bba-rosa); }

.bba .bba-progress{
  position: relative;
  height: 1px;
  background: var(--bba-linea-suave);
  margin-bottom: 24px;
  overflow: hidden;
}
.bba .bba-progress__fill{
  position: absolute; inset: 0;
  background: var(--bba-rosa-honda);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform .9s var(--bba-ease);
}

.bba .bba-q__title{
  margin: 0;
  font-family: var(--bba-serif); font-weight: 370;
  font-size: 1.85rem;
  line-height: 1.06; letter-spacing: -.014em;
  text-wrap: balance;
}
.bba .bba-q__title em{ font-style: italic; font-weight: 320; color: var(--bba-rosa-honda); }

/* ------------------------------------------------------------
   Opciones — filas editoriales de la carta viva
   ------------------------------------------------------------ */

.bba .bba-filas{
  display: block;
  border-top: 1px solid var(--bba-linea);
}

.bba .bba-fila{
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  width: 100%;
  text-align: left;
  padding: 20px 2px;
  border-bottom: 1px solid var(--bba-linea);
  transition: background .4s var(--bba-ease);
}
.bba .bba-screen.is-active .bba-fila{
  animation: bba-fila-in .75s var(--bba-ease) both;
}
.bba .bba-screen.is-active .bba-fila:nth-child(1){ animation-delay: .06s; }
.bba .bba-screen.is-active .bba-fila:nth-child(2){ animation-delay: .14s; }
.bba .bba-screen.is-active .bba-fila:nth-child(3){ animation-delay: .22s; }
.bba .bba-screen.is-active .bba-fila:nth-child(4){ animation-delay: .30s; }
@keyframes bba-fila-in{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: none; }
}

.bba .bba-fila__num{
  padding-top: .42em;
  font-weight: 500; font-size: .64rem;
  letter-spacing: .2em; line-height: 1;
  color: var(--bba-tinta-suave);
  transition: color .35s var(--bba-ease);
}
.bba .bba-fila__body{ display: block; }
.bba .bba-fila__name{
  display: block;
  font-family: var(--bba-serif); font-weight: 380;
  font-size: 1.24rem;
  line-height: 1.2; letter-spacing: -.008em;
  transition: transform .5s var(--bba-ease), color .4s var(--bba-ease);
}
.bba .bba-fila__flor{
  display: inline-block;
  margin-left: .45em;
  font-size: .55em; color: var(--bba-rosa);
  opacity: 0; transform: translateX(-8px) scale(.6);
  transition: opacity .4s var(--bba-ease), transform .5s var(--bba-ease);
}
.bba .bba-fila__sub{
  display: block;
  margin-top: 7px;
  font-size: .84rem; line-height: 1.5;
  color: var(--bba-tinta-suave);
  transition: color .4s var(--bba-ease);
}

@media (hover: hover){
  .bba .bba-fila:hover{ background: rgba(199, 133, 143, .07); }
  .bba .bba-fila:hover .bba-fila__name{ transform: translateX(12px); color: var(--bba-rosa-honda); }
  .bba .bba-fila:hover .bba-fila__flor{ opacity: 1; transform: none; }
  .bba .bba-fila:hover .bba-fila__num{ color: var(--bba-rosa-honda); }}

.bba .bba-fila.is-selected{ background: rgba(199, 133, 143, .1); }
.bba .bba-fila.is-selected .bba-fila__name{ transform: translateX(12px); color: var(--bba-rosa-honda); }
.bba .bba-fila.is-selected .bba-fila__flor{ opacity: 1; transform: none; }
.bba .bba-fila.is-selected .bba-fila__num{ color: var(--bba-rosa-honda); }

.bba .bba-q__foot{
  display: flex; justify-content: flex-start;
  margin-top: 28px;
}

/* ------------------------------------------------------------
   Preparando
   ------------------------------------------------------------ */

.bba .bba-screen--loading{ text-align: center; }

.bba .bba-loading{
  display: grid; justify-items: center;
  padding-block: 14px;
}
.bba .bba-loading__arch{
  position: relative;
  width: 150px; max-width: 60%;
  aspect-ratio: 3.2 / 4;
  border: 1px solid var(--bba-linea);
  border-radius: var(--bba-arch);
  background: var(--bba-crema);
  display: grid; place-items: center;
  padding: 22px 18px;
  margin-bottom: 26px;
}
.bba .bba-loading__flor{
  position: absolute; top: 12%;
  color: var(--bba-rosa);
  font-size: 1rem;
  animation: bba-pulse 1.6s ease-in-out infinite;
}
.bba .bba-loading__text{
  margin: 0 0 22px;
  font-family: var(--bba-serif); font-weight: 350;
  font-size: 1.35rem;
  line-height: 1.24;
  text-wrap: balance;
}
.bba .bba-loading__text em{ font-style: italic; font-weight: 320; color: var(--bba-rosa-honda); }
.bba .bba-loading__bar{
  position: relative;
  width: min(260px, 70%);
  height: 1px;
  background: var(--bba-linea-suave);
  overflow: hidden;
}
.bba .bba-loading__fill{
  position: absolute; inset: 0;
  background: var(--bba-rosa-honda);
  transform-origin: left center;
  transform: scaleX(0);
}
.bba .bba-screen--loading.is-active .bba-loading__fill{
  animation: bba-load 1.9s var(--bba-ease) forwards;
}
@keyframes bba-load{
  from{ transform: scaleX(0); }
  to{ transform: scaleX(1); }
}

/* ------------------------------------------------------------
   Resultados
   ------------------------------------------------------------ */

.bba .bba-results__head{
  text-align: center;
  margin-bottom: 32px;
}
.bba .bba-results__title{
  margin: 0 0 12px;
  font-family: var(--bba-serif); font-weight: 370;
  font-size: 2rem;
  line-height: 1.04; letter-spacing: -.016em;
  text-wrap: balance;
}
.bba .bba-results__title em{ font-style: italic; font-weight: 320; color: var(--bba-rosa-honda); }
.bba .bba-results__because{
  margin: 0 auto;
  max-width: 52ch;
  font-size: .92rem;
  color: var(--bba-tinta-suave);
  text-wrap: pretty;
}
.bba .bba-results__because:empty{ display: none; }

.bba .bba-cards{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  justify-content: center;
}

.bba .bba-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bba-crema);
  border: 1px solid var(--bba-linea-suave);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--bba-ease), transform .8s var(--bba-ease),
              border-color .45s var(--bba-ease), box-shadow .45s var(--bba-ease);
}
.bba .bba-card.is-in{ opacity: 1; transform: none; }
.bba .bba-card:hover{
  border-color: var(--bba-rosa);
  box-shadow: 0 26px 60px -34px rgba(85, 34, 56, .4);
}
.bba .bba-card--top{ background: var(--bba-vainilla); border-color: var(--bba-rosa); }

.bba .bba-card__badge{
  position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  white-space: nowrap;
  font-weight: 500; font-size: .58rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--bba-vainilla);
  background: var(--bba-rosa-honda);
  padding: 5px 13px;
  border-radius: 999px;
}

/* Ventana editorial: el nombre del platillo vive dentro del arco.
   Sin fotos en esta etapa. */
.bba .bba-card__ventana{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 168px;
  margin: 8px 0 18px;
  padding: 42px 16px 22px;
  border-radius: var(--bba-arch);
  background: var(--bba-card-tone, var(--bba-rosa));
  color: var(--bba-vainilla);
}
.bba .bba-card__flor{
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: .85rem;
  color: rgba(251, 249, 247, .9);
}
.bba .bba-card__name{
  margin: 0;
  font-family: var(--bba-serif); font-weight: 370;
  font-size: 1.42rem;
  line-height: 1.14; letter-spacing: -.012em;
  color: var(--bba-vainilla);
  text-wrap: balance;
}
.bba .bba-card__cat{
  margin: 0;
  font-weight: 500; font-size: .58rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(251, 249, 247, .88);
}

.bba .bba-card__desc{
  margin: 0 0 14px;
  font-size: .86rem;
  color: var(--bba-tinta-suave);
  text-wrap: pretty;
}
.bba .bba-card__price{
  margin: 0 0 auto;
  font-family: var(--bba-serif); font-style: italic; font-weight: 340;
  font-size: 1.05rem;
  color: var(--bba-rosa-honda);
}
.bba .bba-card__why{
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dotted rgba(110, 45, 71, .35);
  font-size: .76rem; line-height: 1.5;
  color: var(--bba-tinta-suave);
}
.bba .bba-card__why:empty{ display: none; }

.bba .bba-results__foot{
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: 32px;
}

/* ------------------------------------------------------------
   Lluvia de berries — canvas a pantalla completa
   (inset:0 en vez de 100vw/100vh para no generar scroll horizontal)
   ------------------------------------------------------------ */

.bba-confeti{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2147483000;
  pointer-events: none;
}

/* ============================================================
   Container queries — el quiz crece según SU contenedor
   ============================================================ */

@container bba (min-width: 520px){
  .bba{ --bba-pad-x: 40px; --bba-pad-y: 52px; }
  .bba .bba-intro__title{ font-size: 2.6rem; }
  .bba .bba-q__title{ font-size: 2.2rem; }
  .bba .bba-results__title{ font-size: 2.5rem; }
  .bba .bba-loading__text{ font-size: 1.6rem; }
  .bba .bba-fila{ grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 18px; padding: 23px 4px; }
  .bba .bba-fila__name{ font-size: 1.42rem; }
  .bba .bba-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .bba .bba-cards--1{ grid-template-columns: minmax(0, 380px); }
}

@container bba (min-width: 720px){
  .bba{ --bba-pad-x: 56px; --bba-pad-y: 64px; }
  .bba .bba-intro{
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    justify-items: start;
    text-align: left;
  }
  .bba .bba-intro__arch{ max-width: 240px; }
  .bba .bba-logo--intro{ max-width: 140px; }
  .bba .bba-intro__title{ font-size: 3rem; }
  .bba .bba-intro__sub{ margin-inline: 0; }
  .bba .bba-screen--intro .bba-label{ justify-content: flex-start; }
  .bba .bba-loading__arch{ width: 190px; }
  .bba .bba-logo--loading{ max-width: 104px; }
  .bba .bba-card{ padding: 24px; }
  .bba .bba-card__ventana{ min-height: 190px; }}

@container bba (min-width: 900px){
  .bba{ --bba-pad-x: 72px; --bba-pad-y: 76px; }
  .bba .bba-intro{ grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 64px; }
  .bba .bba-intro__arch{ max-width: 280px; }
  .bba .bba-logo--intro{ max-width: 162px; }
  .bba .bba-intro__title{ font-size: 3.9rem; }
  .bba .bba-q__title{ font-size: 2.85rem; }
  .bba .bba-results__title{ font-size: 3.2rem; }
  .bba .bba-fila__name{ font-size: 1.6rem; }
  .bba .bba-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .bba .bba-cards--2{ grid-template-columns: repeat(2, minmax(0, 340px)); }}

/* Respaldo para navegadores sin container queries: mismos saltos por viewport */
@supports not (container-type: inline-size){
  @media (min-width: 620px){
    .bba{ --bba-pad-x: 40px; --bba-pad-y: 52px; }
    .bba .bba-intro__title{ font-size: 2.6rem; }
    .bba .bba-q__title{ font-size: 2.2rem; }
    .bba .bba-results__title{ font-size: 2.5rem; }
    .bba .bba-fila{ grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 18px; padding: 23px 4px; }
    .bba .bba-fila__name{ font-size: 1.42rem; }
    .bba .bba-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .bba .bba-cards--1{ grid-template-columns: minmax(0, 380px); }
  }
  @media (min-width: 900px){
    .bba{ --bba-pad-x: 60px; --bba-pad-y: 68px; }
    .bba .bba-intro{
      grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
      gap: 52px; align-items: center; justify-items: start; text-align: left;
    }
    .bba .bba-intro__arch{ max-width: 260px; }
    .bba .bba-intro__title{ font-size: 3.4rem; }
    .bba .bba-intro__sub{ margin-inline: 0; }
    .bba .bba-screen--intro .bba-label{ justify-content: flex-start; }
    .bba .bba-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bba .bba-cards--2{ grid-template-columns: repeat(2, minmax(0, 340px)); }
  }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  .bba .bba-screen.is-active,
.bba .bba-screen.is-active .bba-fila{ animation: none; }
  .bba .bba-intro__arch{ animation: none; }
  .bba .bba-intro__flor, .bba .bba-loading__flor{ animation: none; opacity: 1; }
  .bba .bba-screen--loading.is-active .bba-loading__fill{ animation: none; transform: scaleX(1); }
  .bba .bba-card{ opacity: 1; transform: none; transition: none; }
  .bba .bba-progress__fill{ transition: none; }
  .bba .bba-fila:hover .bba-fila__name,
.bba .bba-fila.is-selected .bba-fila__name{ transform: none; }
}