/*
 * Home
 * Estilos específicos de las secciones de la Home.
 * Mobile first.
 */

/* =========================================================
   SIGNALS / SITUATIONS
   1 columna en phone.
   3 columnas desde tablet.
   Sin superficie, borde ni apariencia de card.
   ========================================================= */

.feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-group);

    width: 100%;
    min-width: 0;
}

/*
 * Neutraliza cualquier Card genérica que envuelva un feature.
 * Signals es contenido editorial, no una colección de cards.
 */
.feature-grid > .card,
.feature-grid > .feature,
.feature-grid > * {
    min-width: 0;
}

.feature-grid > .card {
    min-height: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.feature-grid .card__body,
.feature-grid .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-tight);

    padding: 0;

    text-align: center;
}

.feature-grid .card__body > *,
.feature-grid .feature > * {
    margin: 0;
}

.feature-grid h3,
.feature-grid .heading {
    max-width: 18rem;
    margin-inline: auto;

    color: var(--foreground);

    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: var(--text-xl-line);
    font-weight: 600;
    letter-spacing: -0.01em;

    text-align: center;
    text-wrap: balance;
}

.feature-grid p,
.feature-grid .text {
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;

    color: var(--muted-foreground);

    font-size: var(--text-base);
    line-height: var(--text-base-line);

    text-align: center;
    text-wrap: pretty;
}

@media (min-width: 48rem) {
    .feature-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/*
 * Asvid actions
 * La columna de contenido en tablet no tiene ancho suficiente
 * para dos CTA largos en una sola fila.
 */
@media (min-width: 48rem) and (max-width: 63.999rem) {
    #asvid .section-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    #asvid .section-actions .button {
        width: 100%;
    }
}

@media (min-width: 64rem) {
    #asvid .section-actions {
        width: auto;
        flex-direction: row;
        align-items: center;
    }

    #asvid .section-actions .button {
        width: auto;
    }
}

/* PATHS START */
/*
 * Paths
 * Mobile: 1 columna.
 * Tablet: 2 columnas.
 * Desktop: 4 columnas.
 * Intro y contenido siempre centrados.
 */

.paths-section .section-intro {
    max-width: 52rem;
    margin-inline: auto;
}

.paths-section .section-intro__description {
    max-width: 48rem;
}

.paths-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-element);
    margin-top: var(--space-group);
}

.path-choice {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: var(--space-element);
}

.path-choice .card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-tight);
    text-align: center;
}

.path-choice .card__body > * {
    margin: 0;
}

.path-choice .text {
    max-width: 16rem;
}

.path-choice .button {
    width: 100%;
    margin-top: var(--space-element);
}

@media (min-width: 48rem) {
    .paths-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .paths-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}
/* PATHS END */


/* =========================================================
   STANDARD OFFER SECTIONS
   Consultas / Terapia / Escuela

   Traducción de SectionOffers layout="aside":
   mobile  -> intro + cards, todo centrado
   >=768px -> split editorial 5/7, contenido a izquierda
   ========================================================= */

.offer-section > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-group);
    align-items: start;
}

.offer-section .section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-tight);

    min-width: 0;

    text-align: center;
}

.offer-section .section-heading > * {
    margin: 0;
}

.offer-section .section-heading > p:last-child {
    width: 100%;
    max-width: 40rem;

    color: var(--muted-foreground);

    font-size: var(--text-lg);
    line-height: var(--text-lg-line);
}

.offer-section .path-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-element);

    min-width: 0;
}

.offer-section .path-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-tight);

    width: 100%;
    min-width: 0;

    padding: var(--space-element);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: color-mix(
        in oklch,
        var(--card) 84%,
        transparent
    );

    text-align: center;
}

.offer-section .path-card > * {
    margin: 0;
}

.offer-section .path-card .eyebrow,
.offer-section .path-card h3,
.offer-section .path-card p {
    width: 100%;
    text-align: center;
}

.offer-section .path-card h3 {
    color: var(--foreground);

    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: var(--text-xl-line);
    font-weight: 600;
}

.offer-section .path-card p:not(.eyebrow) {
    color: var(--muted-foreground);
}

.offer-section .path-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2rem;
    margin-top: var(--space-tight);
    padding-inline: .625rem;

    border: 1px solid var(--primary-emphasis);
    border-radius: var(--radius);

    color: var(--primary-emphasis);

    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 500;

    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}

@media (min-width: 48rem) {
    .offer-section > .container {
        grid-template-columns:
            minmax(0, 5fr)
            minmax(0, 7fr);
    }

    .offer-section .section-heading {
        align-items: flex-start;
        text-align: left;
    }

    .offer-section .section-heading > * {
        text-align: left;
    }

    .offer-section .path-card {
        align-items: flex-start;
        text-align: left;
    }

    .offer-section .path-card .eyebrow,
    .offer-section .path-card h3,
    .offer-section .path-card p {
        text-align: left;
    }

    .offer-section .path-card a {
        align-self: flex-start;
    }
}

/* =========================================================
   FINAL OVERRIDES · OFFER SECTIONS
   Objetivo:
   - Desktop/Tablet: intro a la izquierda + cards a la derecha
   - Phone: todo en una columna
   - Cards estándar: contenido centrado en phone / alineado a izquierda en tablet+desktop
   - Tienda: 3 cards en desktop+tablet / 1 por fila en phone
   ========================================================= */

/* ---- layout general de secciones con ofertas estándar ---- */

.section--offers .container,
.offers-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.section--offers .section-intro,
.offers-layout .section-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    text-align: center;
}

.section--offers .section-intro > *,
.offers-layout .section-intro > * {
    margin: 0;
}

.section--offers .section-intro .eyebrow,
.offers-layout .section-intro .eyebrow {
    margin-bottom: .25rem;
}

.section--offers .section-intro h2,
.offers-layout .section-intro h2 {
    max-width: 12ch;
    margin-inline: auto;
}

.section--offers .section-intro p:last-child,
.offers-layout .section-intro .section-intro__description,
.offers-layout .section-intro > p:last-child {
    max-width: 32rem;
    margin-inline: auto;
}

/* lista derecha */

.section--offers .path-grid,
.offers-layout .offers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* ---- card estándar (consultas / terapia / escuela) ---- */

.section--offers .path-card:not(.path-card--shop),
.offers-list .offer-card:not(.offer-card--center) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in oklch, var(--card) 88%, transparent);
    overflow: hidden;
}

.section--offers .path-card:not(.path-card--shop) > *,
.offers-list .offer-card:not(.offer-card--center) > * {
    margin: 0;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__content {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 1.25rem 1.25rem 1rem;
    text-align: center;
    align-items: center;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__content > * {
    margin: 0;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__description {
    max-width: none;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__footer {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    align-items: center;
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(255,255,255,.015);
    border-top: 1px solid rgba(255,255,255,.035);
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__meta,
.offers-list .offer-card:not(.offer-card--center) .offer-card__price {
    margin: 0;
    text-align: center;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__meta {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__price {
    color: var(--foreground);
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

.offers-list .offer-card:not(.offer-card--center) .button {
    width: auto;
    min-width: 0;
    align-self: center;
}

/* ---- tablet y desktop: igual que referencia ---- */

@media (min-width: 48rem) {
    .section--offers .container,
    .offers-layout {
        grid-template-columns: minmax(17rem, 4.5fr) minmax(0, 6.5fr);
        gap: 2rem;
    }

    .section--offers .section-intro,
    .offers-layout .section-intro {
        text-align: left;
        align-items: flex-start;
        padding-top: .25rem;
    }

    .section--offers .section-intro h2,
    .offers-layout .section-intro h2 {
        max-width: 8ch;
        margin-inline: 0;
    }

    .section--offers .section-intro p:last-child,
    .offers-layout .section-intro .section-intro__description,
    .offers-layout .section-intro > p:last-child {
        margin-inline: 0;
        max-width: 24rem;
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__content {
        align-items: flex-start;
        text-align: left;
        padding: 1.25rem 1.25rem .875rem;
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__content > * {
        text-align: left;
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__footer {
        align-items: flex-start;
        padding: .875rem 1.25rem 1.125rem;
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__meta,
    .offers-list .offer-card:not(.offer-card--center) .offer-card__price {
        display: inline;
        text-align: left;
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__price::before {
        content: " · ";
        color: var(--muted-foreground);
        font-weight: 400;
    }

    .offers-list .offer-card:not(.offer-card--center) .button {
        align-self: flex-start;
    }
}

/* ---- tienda: 1 columna en phone / 3 columnas en tablet+desktop ---- */

.shop-section .offers-grid,
.offers-grid--three {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.offer-card--center {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in oklch, var(--card) 88%, transparent);
    overflow: hidden;
}

.offer-card--center .offer-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.offer-card--center .offer-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offer-card--center .offer-card__content {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1.25rem 1rem;
}

.offer-card--center .offer-card__content > * {
    margin: 0;
    text-align: center;
}

.offer-card--center .offer-card__footer {
    display: flex;
    flex-direction: column;
    gap: .875rem;
    align-items: center;
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(255,255,255,.015);
    border-top: 1px solid rgba(255,255,255,.035);
    margin-top: auto;
}

.offer-card--center .offer-card__meta,
.offer-card--center .offer-card__price {
    margin: 0;
    text-align: center;
}

.offer-card--center .button {
    width: auto;
    align-self: center;
}

@media (min-width: 48rem) {
    .shop-section .offers-grid,
    .offers-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================
   FIX FINAL · meta + precio en misma línea
   Solo para cards de Consultas/Terapia/Escuela
   ========================================= */

.offers-list .offer-card:not(.offer-card--center) .offer-card__footer {
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    grid-template-areas:
        "meta price ."
        "button button .";
    align-items: center !important;
    column-gap: 0.35rem !important;
    row-gap: 0.875rem !important;
    padding: 0.875rem 1rem 1rem !important;
    background: rgba(255, 255, 255, 0.015) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.035) !important;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__meta {
    grid-area: meta !important;
    margin: 0 !important;
    color: var(--muted-foreground) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--text-sm-line) !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__price {
    grid-area: price !important;
    margin: 0 !important;
    color: var(--muted-foreground) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--text-sm-line) !important;
    font-weight: 400 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__price::before {
    content: " · ";
    color: var(--muted-foreground);
}

.offers-list .offer-card:not(.offer-card--center) .button {
    grid-area: button !important;
    width: fit-content !important;
    min-width: 0 !important;
    align-self: start !important;
}

/* Phone: mantiene mismo patrón pero evita cortes raros */
@media (max-width: 47.99rem) {
    .offers-list .offer-card:not(.offer-card--center) .offer-card__footer {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "meta"
            "price"
            "button";
        row-gap: 0.75rem !important;
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__price::before {
        content: "";
    }

    .offers-list .offer-card:not(.offer-card--center) .offer-card__meta,
    .offers-list .offer-card:not(.offer-card--center) .offer-card__price {
        white-space: normal !important;
    }
}


/* FIX: meta + precio en una sola línea */
.offers-list .offer-card:not(.offer-card--center) .offer-card__footer {
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  grid-template-areas:
    "meta price ."
    "button button .";
  align-items: center !important;
  column-gap: 0 !important;
  row-gap: 0.875rem !important;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__meta {
  grid-area: meta !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__price {
  grid-area: price !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.offers-list .offer-card:not(.offer-card--center) .offer-card__price::before {
  content: " · ";
}

.offers-list .offer-card:not(.offer-card--center) .button {
  grid-area: button !important;
  width: fit-content !important;
}

/* en phone también juntos */
@media (max-width: 47.99rem) {
  .offers-list .offer-card:not(.offer-card--center) .offer-card__footer {
    grid-template-columns: auto auto !important;
    grid-template-areas:
      "meta price"
      "button button";
    column-gap: 0 !important;
  }
}


/* CONTACT SECTION START */

.contact-section .section-intro {
    max-width: 56rem;
    margin-inline: auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-element);
    align-items: stretch;
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-element);

    min-height: 0;
    height: 100%;
    padding: var(--space-element);

    text-align: center;
}

.contact-card .card__body {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-tight);

    width: 100%;
    padding: 0;

    text-align: center;
}

.contact-card .card__body > * {
    margin: 0;
}

.contact-card .eyebrow {
    margin: 0;
    text-align: center;
}

.contact-card__value {
    margin: 0;

    color: var(--foreground);

    font-size: var(--text-base);
    line-height: var(--text-base-line);
    font-weight: 400;

    text-align: center;
    white-space: nowrap;
}

.contact-card__action {
    width: 100%;
    margin-top: auto;

    justify-content: center;
}

@media (min-width: 48rem) {
    .contact-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .contact-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }
}

/* CONTACT SECTION END */

/* OFFER INTRO STICKY START */
/*
 * Consultas / Terapia / Escuela.
 * En layout lateral, la introducción permanece visible
 * mientras se recorren las ofertas.
 */
@media (min-width: 48rem) {
    .offer-section .section-heading {
        position: sticky;
        top: calc(var(--header) + var(--space-group));
        align-self: start;
    }
}

@media (max-width: 47.999rem) {
    .offer-section .section-heading {
        position: static;
    }
}
/* OFFER INTRO STICKY END */

/* TESTIMONIALS START */

/*
 * Testimonios
 * Intro centrada.
 * Mobile: 1 columna.
 * Tablet/Desktop: 3 columnas.
 */

.testimonials-section__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-tight);

    max-width: 52rem;
    margin: 0 auto var(--space-group);

    text-align: center;
}

.testimonials-section__intro > * {
    margin: 0;
}

.testimonials-section__intro h2 {
    text-align: center;
    text-wrap: balance;
}

.testimonials-section__intro > p:last-child {
    max-width: 44rem;

    color: var(--muted-foreground);

    text-align: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-element);

    align-items: stretch;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight);

    min-width: 0;
    height: 100%;

    padding: var(--space-element);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: color-mix(
        in oklch,
        var(--card) 84%,
        transparent
    );

    text-align: left;
}

.testimonial-card > * {
    margin: 0;
}

.testimonial-card > p:first-child {
    flex: 1;

    color: var(--muted-foreground);

    font-size: var(--text-base);
    line-height: var(--text-base-line);
}

.testimonial-card > strong {
    margin-top: var(--space-tight);

    color: var(--foreground);

    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
    font-weight: 600;
}

.testimonial-card > p:last-child {
    color: var(--muted-foreground);

    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

/* Tres testimonios por fila desde tablet. */
@media (min-width: 48rem) {
    .testimonials-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* TESTIMONIALS END */

/* MOBILE FULL-WIDTH ACTIONS START */
/*
 * Home mobile contract:
 * primary and secondary actions use the full available width.
 */
@media (max-width: 47.999rem) {
    .hero__actions,
    #asvid .section-actions,
    .final-cta__action {
        width: 100%;
        align-items: stretch;
    }

    .hero__actions .button,
    #asvid .section-actions .button,
    .paths-section .path-choice .button,
    .offer-section .path-card > a,
    .shop-section .path-card > a,
    .contact-section .contact-card__action,
    .final-cta__action .button {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
        justify-content: center;
        text-align: center;
    }
}
/* MOBILE FULL-WIDTH ACTIONS END */


/* HERO REAL VIEWPORT HEIGHT START */

@media (max-width: 47.999rem) {
    .hero {
        min-height: calc(100svh - 2rem - 4rem);
        height: auto;

        display: flex;
        align-items: center;

        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .hero > .container,
    .hero__inner,
    .hero__content {
        min-height: 0;
        height: auto;
    }
}

/* HERO REAL VIEWPORT HEIGHT END */