/* components.css — piezas reutilizables: botones, tarjetas, listas, carrusel,
   planes, acordeón y formulario. Depende de css/tokens.css y css/base.css.
   Cada componente es una sola regla con sus estados anidados: no debe existir
   un segundo bloque para el mismo selector más abajo. */

/* ============ botones ============ */

/* Compactos y casi rectos. Un botón aquí es una etiqueta de acción, no un
   elemento decorativo: sin rebote al pasar el cursor, solo cambio de color. */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:var(--pad-btn);
  border-radius:var(--r-btn);
  border:1px solid transparent;
  font-family:var(--display);
  font-variation-settings:"wdth" var(--wdth-condensed);
  font-weight:700;
  font-size:var(--fs-btn);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);

  & svg{width:12px;height:12px;transition:transform var(--t-fast)}
  &:hover svg{transform:translateX(2px)}
}

.btn-primary{
  background:var(--green);
  color:var(--on-green);
  font-weight:600;

  &:hover{background:var(--green-bright)}
}

.btn-light{
  background:var(--white);
  color:var(--black);

  &:hover{background:var(--white-pure)}
}

.btn-ghost{
  border-color:var(--line);
  color:var(--white);
  background:var(--btn-ghost-bg);

  &:hover{border-color:var(--green);color:var(--green)}
}

.btn-dark{
  background:var(--black);
  color:var(--white);

  &:hover{background:var(--black-pure)}
}

/* Variante para enlaces secundarios que pueden partirse en dos líneas. */
.btn-sm{
  white-space:normal;
  text-align:center;
}

/* ============ "todo esto está incluido" ============
   Lista tipográfica, no tarjetas: cada beneficio es una fila con su disco
   numerado, el título grande a la izquierda y el texto a la derecha,
   separadas solo por una línea. El peso lo pone el titular. */

.cards{
  gap:0;
  grid-template-columns:1fr;
  border-top:1px solid var(--line);
}

.card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.5rem 1.25rem;
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid var(--line);
  transition:background var(--t-mid) var(--ease);

  & .num{grid-row:1/3;align-self:start;margin:0}
  & h4{font-size:var(--fs-h3)}
  & .small{font-size:var(--fs-lead);color:var(--off-white);max-width:52ch}
  & .why{grid-column:2}

  &::before{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    height:1px;
    width:0;
    background:var(--green);
    transition:width .45s var(--ease);
  }
  /* El número va dentro de un disco de barra: anillo con agujero al centro. */
  & .num{
    display:inline-grid;
    place-items:center;
    width:2.6rem;
    height:2.6rem;
    margin-bottom:1.4rem;
    border:2px solid var(--green-dark);
    border-radius:50%;
    box-shadow:inset 0 0 0 4px var(--black),inset 0 0 0 5px var(--line);
    font-size:var(--fs-tiny);
    color:var(--green);
  }
  &:hover::before{width:100%}
}
@media(min-width:900px){
  .card{grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr);align-items:start;column-gap:2.5rem}
  .card .small{grid-column:3;grid-row:1}
  .card .why{grid-column:3;grid-row:2}
}

/* ============ insignias ============
   Etiquetas cortas que resaltan un dato que no debe pasar desapercibido:
   "Sin matrícula", "Valores por persona". */

.badge{
  display:inline-flex;
  align-items:center;
  padding:.28rem .5rem;
  border:1px solid var(--line-green);
  border-radius:var(--r-sm);
  font-family:var(--mono);
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--green);
  white-space:nowrap;

  &.badge-strong{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
}

.plan-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.4rem}

/* ============ "por qué" ============
   Una línea bajo cada beneficio para quien nunca ha entrenado. La etiqueta va
   en línea y en naranjo, como "clave: texto"; sin cajas ni separadores. */

.why{
  margin-top:.6rem;
  font-size:var(--fs-body);
  color:var(--muted);
  line-height:1.55;

  & b{
    display:inline;
    margin-right:.45em;
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.1em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--orange);
  }
}
.panel-dark .why{margin-top:1.25rem}

/* ============ galería del recinto ============
   Grilla de tres columnas con todas las fotos a la vista. Las apaisadas van
   en 3:2 (su proporción original); la exterior ocupa dos columnas y la
   vertical dos filas, rellenando lo que le toque. En móvil, dos columnas. */

.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-flow:dense;
  gap:var(--grid-gap);
}
@media(min-width:960px){
  .gallery{grid-template-columns:repeat(3,1fr)}
}

.gallery-item{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--panel-2);
  aspect-ratio:3/2;

  & picture,& img{display:block;width:100%;height:100%}
  & img{object-fit:cover;transition:transform 1.2s var(--ease)}
  &:hover img{transform:scale(1.04)}
  & figcaption{
    position:absolute;
    inset:auto 0 0 0;
    padding:2.5rem 1rem .9rem;
    background:var(--scrim-caption);
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--white);
  }
}
.gallery-wide{grid-column:span 2}
.gallery-tall{grid-row:span 2;aspect-ratio:auto;min-height:100%}
.gallery-pano{grid-column:1/-1;aspect-ratio:3/1}
@media(max-width:959px){
  .gallery-pano{aspect-ratio:2/1}
}

.carousel{position:relative}
.carousel-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}

.round-btn{
  width:38px;
  height:38px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  transition:var(--t-fast) var(--ease);

  & svg{width:14px;height:14px}
  &:hover{color:var(--green);border-color:var(--green)}
}

/* ============ ciclo del sistema (SVG dentro del panel claro) ============
   El sistema no es una lista de seis pasos: es un ciclo que se repite cada
   mes, y el diagrama lo dibuja como tal. El SVG vive en index.html porque
   sus etiquetas son contenido; aquí solo van los colores y las fuentes. */

.system{
  display:grid;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
@media(min-width:960px){
  .system{grid-template-columns:1fr minmax(0,580px)}
}

/* Contenedor con la proporción del espacio virtual (840×640). Las etiquetas
   se posicionan en % respecto de ese espacio; el tamaño de letra sigue al
   ancho del contenedor (cqw) para que en móvil no se achique de más. */
.cycle-wrap{
  position:relative;
  width:100%;
  max-width:600px;
  margin-inline:auto;
  container-type:inline-size;
}
/* El escenario tiene la proporción del espacio virtual (840×640). */
.cycle-stage{position:relative;width:100%;aspect-ratio:840/640}
.cycle{position:absolute;inset:0;width:100%;height:100%;display:block}

.cycle-label{
  position:absolute;
  line-height:1.05;

  & b{
    display:block;
    font-family:var(--display);
    font-variation-settings:"wdth" var(--wdth-wide);
    font-weight:500;
    font-size:clamp(.78rem,2.2cqw,1.1rem);
    letter-spacing:-.01em;
    text-transform:uppercase;
    color:var(--black);
  }
  & small{
    display:block;
    margin-top:.25em;
    font-family:var(--mono);
    font-size:clamp(.62rem,1.9cqw,.8rem);
    letter-spacing:.04em;
    color:var(--ink-panel-muted);
  }
  /* nodo arriba (420,130): etiqueta encima */
  &.at-top{left:50%;bottom:calc(100% - 130/640*100% + 5%);transform:translateX(-50%);text-align:center;width:max-content}
  /* nodo derecha (610,320): etiqueta a la derecha */
  &.at-right{left:calc(610/840*100% + 4.5%);top:50%;transform:translateY(-50%);max-width:23%}
  /* nodo abajo (420,510): etiqueta debajo */
  &.at-bottom{left:50%;top:calc(510/640*100% + 5%);transform:translateX(-50%);text-align:center;width:max-content}
  /* nodo izquierda (230,320): etiqueta a la izquierda */
  &.at-left{right:calc(100% - 230/840*100% + 4.5%);top:50%;transform:translateY(-50%);text-align:right;max-width:23%}
}
.cycle-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:max-content;

  & b{
    display:block;
    font-family:var(--display-heavy);
    font-weight:400;
    font-size:clamp(1.4rem,5.6cqw,2.3rem);
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--black);
  }
  & small{
    display:block;
    margin-top:.4em;
    font-family:var(--mono);
    font-size:clamp(.62rem,1.9cqw,.8rem);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--green-deep);
  }
}
/* Móvil: el dibujo a todo el ancho del panel y las etiquetas en una lista
   2×2 debajo, cada una con su número. */
@media(max-width:700px){
  .cycle-wrap{
    max-width:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem 1.25rem;
  }
  .cycle-stage{grid-column:1/-1}
  /* :is() con las cuatro posiciones para superar la especificidad de las
     reglas de escritorio (.cycle-label.at-*), que fijan transform y ancho. */
  .cycle-label:is(.at-top,.at-right,.at-bottom,.at-left){
    position:static;
    transform:none;
    max-width:none;
    width:auto;
    text-align:left;
    padding-left:1.6rem;

    &::before{
      content:attr(data-n);
      float:left;
      margin-left:-1.6rem;
      font-family:var(--mono);
      font-size:var(--fs-tiny);
      font-weight:600;
      color:var(--green-dark);
      line-height:1.5;
    }
    min-width:0;
    /* las palabras no se parten por la mitad: el cuerpo baja para caber */
    overflow-wrap:normal;

    & b{font-size:clamp(.72rem,3.6vw,.9rem);letter-spacing:0}
    & small{font-size:var(--fs-tiny)}
    & br{display:none}
  }
  .cycle-center b{font-size:clamp(1.3rem,7cqw,2rem)}
}

/* ============ línea de tiempo (proceso de ingreso) ============
   Cuatro pasos sobre una línea. El nodo de "Inicio" es el único relleno:
   hasta ahí no hay compromiso. */

.timeline{
  position:relative;
  display:grid;
  gap:2rem 1.5rem;
  grid-template-columns:1fr;
  padding-left:1.75rem;

  /* eje vertical (móvil) */
  &::before{
    content:"";
    position:absolute;
    left:7px;
    top:8px;
    bottom:8px;
    width:1px;
    background:var(--line);
  }
}

.timeline-item{
  position:relative;

  &::before{
    content:"";
    position:absolute;
    left:-1.75rem;
    top:.3rem;
    width:15px;
    height:15px;
    border-radius:50%;
    border:2px solid var(--green-dark);
    background:var(--black);
  }
  & h4{margin:.6rem 0 .45rem}
  & .num{display:block}

  &.is-start::before{background:var(--green);border-color:var(--green)}
}

.timeline-flag{
  display:inline-block;
  margin-top:.9rem;
  padding:.3rem .55rem;
  border:1px dashed var(--orange-dark);
  border-radius:var(--r-sm);
  font-family:var(--mono);
  font-size:var(--fs-tiny);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
}

/* Acuerdo de dos partes, bajo la línea de tiempo. */
.pact{
  display:grid;
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:var(--pad-panel-dark);
  border:1px solid var(--line-green);
  border-radius:var(--r-lg);
  background:var(--surface-featured);

  & h3{margin:.7rem 0 .9rem}
  & .small{max-width:48ch}
}
.pact-cols{
  display:grid;
  gap:1.5rem;

  & .barbell{
    grid-column:1/-1;
    width:100%;
    max-width:420px;
    height:auto;
    fill:var(--green-dark);
    opacity:.95;

    & .barbell-sleeve{fill:var(--muted-2)}
    & .barbell-knurl{fill:var(--green)}
    & .barbell-collar{fill:var(--muted)}
  }
  & .tiny{display:block;color:var(--green-dark)}
  & .checklist{margin-top:.9rem;gap:.6rem}
  & .checklist li{font-size:var(--fs-small)}
}
@media(min-width:640px){
  .pact-cols{grid-template-columns:1fr 1fr}
}
@media(min-width:960px){
  .pact{grid-template-columns:1fr 1.3fr;align-items:start}
}

@media(min-width:900px){
  .timeline{
    grid-template-columns:repeat(4,1fr);
    padding-left:0;
    padding-top:2rem;

    /* eje horizontal (escritorio) */
    &::before{left:0;right:0;top:7px;bottom:auto;width:auto;height:1px}
  }
  .timeline-item::before{left:0;top:-2rem}
}

/* ============ checklist ============ */

.checklist{
  display:grid;
  gap:.9rem;
  margin-top:1.75rem;

  & li{
    display:flex;
    gap:.85rem;
    align-items:flex-start;
    color:var(--off-white);
    font-size:var(--fs-body);
  }
  & li::before{
    content:"";
    flex:none;
    width:16px;
    height:16px;
    margin-top:.2rem;
    border-radius:50%;
    background:var(--green);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  }
}

/* Lista con guion — usada por pilares y equipo. */
.dash-list{
  display:grid;
  gap:.5rem;
  margin-top:1rem;

  & li{
    display:flex;
    gap:.6rem;
    font-size:var(--fs-small);
    color:var(--muted);
  }
  & li::before{content:"—";color:var(--green-dark)}
}

/* ============ cuatro frentes ============
   Grilla 2×2 separada por líneas de 1px; la pieza central se apoya sobre el
   cruce y dice lo que une a los cuatro. En móvil se apila y el centro se oculta. */

.fronts{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
@media(min-width:800px){
  .fronts{grid-template-columns:1fr 1fr}
}

.front{
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--black-90);
  transition:background var(--t-mid) var(--ease);

  & .num{display:block;margin-top:1.1rem}
  & h4{margin:.7rem 0 .75rem}
  &:hover{background:var(--panel)}
}
@media(min-width:800px){
  /* deja sitio al centro en las esquinas interiores */
  .front:nth-child(1),.front:nth-child(3){padding-right:clamp(3rem,7vw,6rem)}
  .front:nth-child(2),.front:nth-child(4){padding-left:clamp(3rem,7vw,6rem)}
}

.front-icon{
  width:44px;
  height:44px;
  fill:none;
  stroke:var(--green);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.front-center{
  display:none;
  position:absolute;
  left:50%;
  top:50%;
  width:7.5rem;
  height:7.5rem;
  transform:translate(-50%,-50%);
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:var(--on-green);
  text-align:center;
  font-family:var(--display);
  font-variation-settings:"wdth" var(--wdth-wide);
  text-transform:uppercase;
  font-size:.95rem;
  font-weight:600;
  line-height:1.1;
  box-shadow:0 0 0 8px var(--black),0 0 0 9px var(--line-green);
}
@media(min-width:800px){
  .front-center{display:grid}
}

/* ============ equipo ============ */

.team{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.coach{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface-coach);

  &:hover .coach-media img{transform:scale(1.05)}
}

.coach-media{
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--panel-2);

  & img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 18%;
    transition:transform 1s var(--ease);
  }
}
@media(min-width:1080px){
  .coach-media{aspect-ratio:4/3}
}

.coach-body{
  padding:var(--pad-coach);

  & h4{margin:.7rem 0 .35rem}
  & .dash-list{gap:.45rem;margin-top:1.1rem}
  & .dash-list li{font-size:.85rem}
}

/* ============ perfiles (con quién trabajamos) ============
   Tres columnas de igual altura. La cita va en display grande; debajo, cómo
   se adapta el sistema. Sin carrusel: los tres se ven a la vez. */

.profiles{
  display:flex;
  gap:var(--grid-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:.5rem;

  &::-webkit-scrollbar{display:none}
}

.profile{
  flex:0 0 min(420px,84%);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  padding:var(--pad-card);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--black-90);
  transition:background var(--t-mid) var(--ease);

  & .num{display:block;margin-bottom:1.25rem}
  & h3{margin-bottom:.8rem}
  & .tiny{display:block;margin-top:1.5rem;color:var(--green-dark)}
  & .dash-list{margin-top:.6rem}
  &:hover{background:var(--panel)}
}

.profile-quote{
  font-family:var(--display);
  font-variation-settings:"wdth" var(--wdth-narrow);
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.35;
  color:var(--off-white);
}

.profile-tag{
  margin-top:auto;
  padding-top:1.5rem;
  font-size:var(--fs-small);
  color:var(--muted-2);
}

/* ============ selector de frecuencia ============ */

.freq{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  padding:.35rem;
  width:fit-content;
  margin-bottom:2.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-btn);

  & button{
    padding:.6rem 1.15rem;
    border-radius:var(--r-btn);
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    transition:.25s var(--ease);
  }
  & button[aria-selected="true"]{
    background:var(--green);
    color:var(--on-green);
    font-weight:600;
  }
  & button:hover:not([aria-selected="true"]){color:var(--white)}
  & .off{opacity:.75;margin-left:.35rem}
}
/* ============ promo fija al pie ============
   Franja discreta anclada abajo. js/promo.js la muestra si la fecha no pasó,
   rellena los días que restan y la cierra. Con la promo visible, <body>
   lleva `.con-promo` y el botón de WhatsApp sube para no taparla. */

.promo{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-float);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem 1rem;
  padding:.65rem var(--gutter) .65rem calc(var(--gutter) - 4px);
  border-top:1px solid var(--line-green);
  border-left:4px solid var(--green);
  background:var(--black-90);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  & p{flex:1 1 280px;font-size:var(--fs-small);color:var(--off-white);line-height:1.45}
  & .promo-restan{color:var(--green);font-family:var(--mono);font-size:var(--fs-tiny);letter-spacing:.08em;text-transform:uppercase}
  &[hidden]{display:none}
  /* móvil: texto corto en una fila propia; la frase secundaria se oculta */
  @media(max-width:640px){
    & p{flex-basis:100%;font-size:var(--fs-tiny)}
    & .promo-extra{display:none}
  }
}
.promo-tag{
  font-family:var(--mono);
  font-size:var(--fs-tiny);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--on-green);
  background:var(--green);
  padding:.3rem .5rem;
  border-radius:var(--r-sm);
}
.promo-cerrar{
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:1.2rem;
  line-height:1;
  color:var(--muted);

  &:hover{color:var(--white);border-color:var(--green)}
}

/* Segundo selector (vista): mismo control, separado del de frecuencia. */
.freq.modo{margin-top:-1.75rem}
.freq + .freq.modo{margin-top:-1.5rem}

/* Tabla simple (semi personalizado): sin columna activa ni celdas elegibles. */
.price-grid-simple{
  & td{cursor:default;color:var(--white)}
  & td:hover{background:transparent}
  & thead th{color:var(--muted)}
}
.plan-alt-prices{
  min-width:0;
  overflow-x:auto;
  & > .tiny{display:block;margin-bottom:.75rem}
  & .plan-note{margin-top:.75rem}
  & .btn{margin-top:1rem}
}

/* ============ reseñas de Google ============ */

.rating{
  display:grid;
  gap:.35rem;
  justify-items:start;
  align-content:end;

  & b{
    font-family:var(--display-heavy);
    font-weight:400;
    font-size:var(--fs-h3);
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  & .btn{margin-top:.6rem}
}
.stars{
  color:var(--orange);
  font-size:1.05rem;
  letter-spacing:.12em;
  line-height:1;
}

.reviews{
  display:flex;
  gap:var(--grid-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:.5rem;

  &::-webkit-scrollbar{display:none}
}

.review{
  flex:0 0 min(520px,86%);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin:0;
  padding:var(--pad-card);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--black-90);

  & p{
    font-family:var(--display);
    font-variation-settings:"wdth" var(--wdth-narrow);
    font-size:clamp(1.05rem,1.4vw,1.2rem);
    line-height:1.45;
    color:var(--off-white);
  }
  & footer{margin-top:auto;display:grid;gap:.2rem}
  & footer b{font-weight:500;color:var(--white)}
}

/* En pantallas angostas los cuatro botones no caben en una fila y el flex-wrap
   los dejaba en un escalonado irregular. Una grilla 2×2 a ancho completo se lee
   como un control, no como texto suelto. */
@media(max-width:560px){
  .freq{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    border-radius:var(--r);

    & button{border-radius:var(--r-sm);text-align:center}
  }
}

/* ============ planes ============ */

/* Cada plan lleva una tabla de 5 columnas: bajo ~840 px van apilados. */
.plans{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start}

.plan{
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--pad-plan);
  background:var(--surface-plan);

  & h3{margin:.55rem 0 .6rem}
  & .checklist{margin-top:1.5rem}
  & .checklist li{font-size:var(--fs-small)}
  & .btn{margin-top:1.75rem;justify-content:center}

  &.featured{
    border-color:var(--line-green);
    background:var(--surface-featured);
  }

}

/* Tabla completa: sesiones × frecuencia. La columna activa (data-freq del
   <table>, que fija js/precios.js) va en lima; el resto queda en gris para
   que se pueda comparar sin perder el foco. */
.price-scroll{margin-top:auto;padding-top:1.5rem;overflow-x:auto;scrollbar-width:thin}

.price-grid{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
  table-layout:fixed;

  & caption{text-align:left;margin-bottom:.75rem;caption-side:top}
  & th,& td{padding:.65rem .2rem;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
  & thead th:first-child{width:5.2rem}
  & thead th{
    border-top:0;
    padding-top:0;
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:400;
    color:var(--muted-2);
    vertical-align:bottom;
  }
  & thead th small{display:block;font-size:var(--fs-micro);letter-spacing:.04em;color:var(--green-dark)}
  & tbody th{
    text-align:left;
    font-family:var(--mono);
    font-size:var(--fs-label);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:400;
    color:var(--muted);
  }
  & tbody th small{display:block;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:none;color:var(--muted-2)}
  & td{
    position:relative;
    color:var(--muted);
    transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
  }
  & td b{
    display:block;
    font-family:var(--display-heavy);
    font-weight:400;
    font-size:clamp(1rem,1.35vw,1.2rem);
    letter-spacing:.02em;
  }
  /* celdas: clic para elegir la combinación; la elegida lleva marco verde */
  & td{cursor:pointer;border-radius:var(--r-sm)}
  & td:hover{background:var(--field-bg)}
  & td[aria-selected="true"]{
    background:var(--surface-featured);
    box-shadow:inset 0 0 0 2px var(--green);
    color:var(--white);
  }
  & td[aria-selected="true"] b{color:var(--green)}
  /* etiqueta "más elegido" dentro de la celda */
  & .top-tag{
    display:block;
    margin-top:.3rem;
    font-family:var(--mono);
    font-style:normal;
    font-size:var(--fs-nano);
    letter-spacing:.1em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--orange);
  }
  & caption b{color:var(--green);font-weight:600}
  /* columna activa */
  &[data-freq="mensual"] [data-freq="mensual"],
  &[data-freq="trimestral"] [data-freq="trimestral"],
  &[data-freq="semestral"] [data-freq="semestral"],
  &[data-freq="anual"] [data-freq="anual"]{color:var(--white)}
  &[data-freq="mensual"] td[data-freq="mensual"] b,
  &[data-freq="trimestral"] td[data-freq="trimestral"] b,
  &[data-freq="semestral"] td[data-freq="semestral"] b,
  &[data-freq="anual"] td[data-freq="anual"] b{font-size:clamp(1rem,1.4vw,1.2rem)}
}

.plan.featured .price-grid{
  &[data-freq="mensual"] td[data-freq="mensual"],
  &[data-freq="trimestral"] td[data-freq="trimestral"],
  &[data-freq="semestral"] td[data-freq="semestral"],
  &[data-freq="anual"] td[data-freq="anual"]{color:var(--green)}
}

/* En móvil no caben las cuatro columnas: se muestra solo la elegida y el
   selector vuelve a funcionar como conmutador. */
@media(max-width:560px){
  .price-grid{table-layout:auto}
  .price-grid thead th:first-child{width:auto}
  .price-grid [data-freq]{display:none}
  .price-grid[data-freq="mensual"] [data-freq="mensual"],
  .price-grid[data-freq="trimestral"] [data-freq="trimestral"],
  .price-grid[data-freq="semestral"] [data-freq="semestral"],
  .price-grid[data-freq="anual"] [data-freq="anual"]{display:table-cell}
  .price-grid td b{font-size:1.25rem}
  /* la tabla del semi personalizado muestra sus tres columnas siempre:
     las celdas parten línea y el número baja un poco para caber */
  .price-grid-simple th,.price-grid-simple td{white-space:normal;padding-inline:.15rem}
  .price-grid-simple td b{font-size:1.05rem}
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.plan-note{margin-top:1rem;font-size:var(--fs-small);color:var(--muted);line-height:1.5}

.plan-alt{
  margin-top:1.25rem;
  display:grid;
  /* minmax(0,…) para que la tabla no ensanche la página en móvil */
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--pad-plan);
  background:var(--surface-alt);

  & h4{margin:.7rem 0 .45rem}
  & .tiny{display:block}
  & p.tiny{margin-bottom:.6rem}
  & .checklist{margin-top:1.25rem}
  & .plan-alt-hours{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:.35rem .8rem;
    margin:.5rem 0 .9rem;
    padding:.6rem .8rem;
    border:1px solid var(--line-green);
    border-radius:var(--r-sm);
    background:var(--surface-featured);

    & b{
      font-family:var(--display-heavy);
      font-weight:400;
      font-size:1.6rem;
      letter-spacing:.02em;
      color:var(--green);
    }
    & span{font-size:var(--fs-small);color:var(--off-white)}
  }
  & .price{
    font-family:var(--display);
    font-variation-settings:"wdth" var(--wdth-narrow);
    font-size:2rem;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
}
@media(min-width:900px){
  .plan-alt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}

/* ============ acordeón de preguntas ============
   <details>/<summary> nativo. Accesible y navegable por teclado sin JS,
   y `name="faq"` en el HTML hace que solo uno esté abierto a la vez. */

.faq{border-top:1px solid var(--line);max-width:960px}

.faq-item{
  border-bottom:1px solid var(--line);

  & summary{
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
    padding-block:1.5rem;
    cursor:pointer;
    list-style:none;
    transition:color .25s var(--ease);

    &::-webkit-details-marker{display:none}
    &::marker{content:""}
    &:hover{color:var(--green)}
  }
  & summary .num{margin-top:.35rem}
  & summary h4{flex:1;font-size:clamp(1rem,1.6vw,1.25rem)}

  & .faq-icon{
    flex:none;
    width:28px;
    height:28px;
    margin-top:.1rem;
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    display:grid;
    place-items:center;
    font-family:var(--mono);
    font-size:1rem;
    line-height:1;
    transition:var(--t-fast) var(--ease);
  }
  &[open] .faq-icon{
    transform:rotate(45deg);
    background:var(--green);
    color:var(--on-green);
    border-color:var(--green);
  }

  & .faq-a{
    padding:0 0 1.6rem calc(28px + 1.25rem);
    color:var(--muted);
    max-width:70ch;
  }
  & .faq-list{
    display:grid;
    gap:.45rem;
    margin:0;
    padding:0 0 1.6rem calc(28px + 1.25rem + 1.1rem);
    list-style:disc;
    color:var(--muted);
    font-size:var(--fs-small);
    line-height:1.55;
    max-width:70ch;
  }
}
/* Lógica comercial y condiciones, plegadas bajo los planes. */
.terms{margin-top:2.5rem;max-width:none}

/* Ocupación de un bloque: ocho celdas, las libres en hueco. Ejemplo, no dato real. */
.plazas{
  display:grid;
  grid-template-columns:repeat(8,1.6rem);
  gap:.4rem;
  margin:1.25rem 0 .5rem;

  & span{
    height:1.6rem;
    border-radius:var(--r-sm);
    background:var(--green);
    &.is-libre{background:transparent;border:1px dashed var(--line-green)}
  }
  & b{
    grid-column:1 / -1;
    margin-top:.4rem;
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--green);
  }
  & small{grid-column:1 / -1;font-size:var(--fs-tiny);color:var(--muted-2)}
}

/* Animación de apertura. `interpolate-size` no es Baseline todavía:
   donde no exista, el acordeón abre igual, solo que sin animar. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}

  .faq-item::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .4s var(--ease),content-visibility .4s allow-discrete;
  }
  .faq-item[open]::details-content{block-size:auto}
}
@media(prefers-reduced-motion:reduce){
  .faq-item::details-content{transition:none}
}

/* ============ bloque de información (contacto y footer) ============ */

.info-block{
  margin-bottom:1.75rem;

  & h5{
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted-2);
    font-weight:400;
    margin-bottom:1rem;
  }
  & :is(p,a){
    font-size:var(--fs-small);
    color:var(--off-white);
    line-height:1.7;
    display:block;
  }
  & a:hover{color:var(--green)}
}

/* ============ formulario de contacto ============ */

.form{
  display:grid;
  gap:1rem;

  & button[type=submit]{
    grid-column:1/-1;
    justify-self:start;

    &[aria-busy=true]{opacity:.6;pointer-events:none}
  }
}
@media(min-width:640px){
  .form{grid-template-columns:1fr 1fr}
}

.field{
  display:grid;
  gap:.45rem;

  &.wide{grid-column:1/-1}

  & label{
    font-family:var(--mono);
    font-size:var(--fs-tiny);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  & :is(input,select,textarea){
    font:inherit;
    width:100%;
    color:var(--white);
    background:var(--field-bg);
    border:1px solid var(--line);
    border-radius:var(--r-sm);
    padding:.85rem 1rem;
    transition:border-color var(--t-fast) var(--ease);

    &::placeholder{color:var(--muted-2)}
    &:hover{border-color:var(--line-green)}
    &:user-invalid{border-color:var(--danger)}
  }
  & textarea{min-height:120px;resize:vertical}
  & select{appearance:none;cursor:pointer}
  & option{background:var(--panel-2);color:var(--white)}

  & .error{
    font-size:var(--fs-tiny);
    color:var(--danger);
    min-height:1em;
    line-height:1.4;
  }
}

/* Honeypot. Fuera de pantalla en vez de `display:none`,
   porque algunos bots ignoran los campos ocultos con display. */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-status{
  grid-column:1/-1;
  border-radius:var(--r-sm);
  padding:1rem 1.15rem;
  font-size:var(--fs-small);
  line-height:1.55;

  &[hidden]{display:none}
  &.ok{background:var(--ok-bg);border:1px solid var(--line-green);color:var(--white)}
  &.err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--white)}
  & a{color:var(--green);text-decoration:underline}
}