@layer reset, base, components;

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/nunito-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fuentes/nunito-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fuentes/nunito-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fuentes/nunito-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
  }

  p,
  h1,
  h2,
  h3 {
    margin: 0;
  }

  img,
  svg {
    max-inline-size: 100%;
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scrollbar-color: var(--color-navy) transparent;
    scrollbar-width: thin;
    accent-color: var(--color-navy);
  }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-size-adjust: from-font;
    font-weight: 600;
    line-height: var(--leading-body);
    text-align: start;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  .precio-base {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-3xl);
    max-inline-size: 16em;
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  p,
  li,
  dd {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  p {
    max-inline-size: 68ch;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@layer components {
  .skip {
    position: absolute;
    inset-inline-start: var(--space-md);
    inset-block-start: var(--space-sm);
    transform: translateY(-150%);
    background: var(--color-surface);
    color: var(--color-ink);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    z-index: 20;
  }

  .skip:focus {
    transform: none;
  }

  .envoltorio {
    width: min(
      100% - 2 * var(--space-lg) - env(safe-area-inset-inline-start, 0px) - env(safe-area-inset-inline-end, 0px),
      var(--measure-wide)
    );
    margin-inline: auto;
  }

  .cabecera {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--color-paper) 92%, transparent);
    border-block-end: 1px solid transparent;
  }

  .cabecera-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-block-size: var(--header-h);
  }

  .cabecera-interior > * {
    flex-shrink: 0;
  }

  .cabecera.is-measuring,
  .cabecera.is-measuring * {
    transition: none;
  }

  .marca {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .marca img {
    inline-size: 1.65rem;
    block-size: auto;
    flex: none;
  }

  .navegacion {
    display: flex;
    align-items: center;
  }

  .menu {
    min-block-size: 2.75rem;
    padding-inline: var(--space-md);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    anchor-name: --menu-button;
  }

  .menu-lista {
    list-style: none;
    position: fixed;
    inset: auto;
    inset-block-start: 4.75rem;
    inset-block-start: anchor(--menu-button bottom);
    inset-inline-end: var(--space-md);
    inline-size: min(80dvw, 22rem);
    max-inline-size: calc(100dvw - 2rem);
    max-block-size: calc(100dvh - 6rem);
    margin: 0;
    margin-block-start: 0.5rem;
    padding: var(--space-sm);
    border: 0;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    overflow: auto;
  }

  .menu-lista:where(:popover-open, .\:popover-open) {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .menu-lista a:not(.button) {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
  }

  .menu-lista a:not(.button):hover {
    background: var(--color-paper);
  }

  .cabecera.is-wide .menu {
    display: none;
  }

  .cabecera.is-wide .menu-lista {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    inline-size: auto;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .cabecera.is-wide .menu-lista::backdrop {
    display: none;
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-block: 0.65rem;
    padding-inline: 1.15rem;
    border: 1px solid var(--color-navy);
    border-radius: var(--radius-pill);
    background: var(--color-navy);
    color: var(--color-inverse);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .button:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
  }

  .button-suave {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-surface);
  }

  .button-suave:hover {
    background: var(--color-paper);
    border-color: var(--color-paper);
    color: var(--color-ink);
  }

  .hero {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .hero-rejilla {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  .hero p {
    margin-block-start: var(--space-lg);
  }

  .hero .acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
  }

  .hero-video {
    align-self: center;
  }

  .hero-video .video {
    max-inline-size: none;
    margin: 0;
  }

  .video {
    position: relative;
    inline-size: 100%;
    max-inline-size: 52rem;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 1rem;
    outline: none;
    background: transparent;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .video iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: 1rem;
    background: transparent;
  }

  .seccion {
    padding-block: var(--space-xl);
  }

  .pildora {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-block-end: var(--space-lg);
    padding-block: 0.7rem;
    padding-inline: 1.15rem 1.35rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-soft);
  }

  .pildora p {
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .entradilla {
    margin-block-end: var(--space-lg);
  }

  .precios-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-xl);
    row-gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  .precios-cabecera .pildora,
  .precios-cabecera .entradilla {
    margin-block-end: 0;
  }

  .precios-cabecera .entradilla {
    flex: 1 1 16rem;
  }

  .pasos {
    display: grid;
    gap: var(--space-md);
    list-style: none;
  }

  .pasos li {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }

  .pasos li:nth-child(1) { background: var(--color-terra); }
  .pasos li:nth-child(2) { background: var(--color-sage); }
  .pasos li:nth-child(3) { background: var(--color-mustard); }

  .paso-num {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 800;
  }

  .registro {
    margin-block-start: var(--space-lg);
    color: var(--color-ink-soft);
  }

  .panel-datos {
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-navy);
    color: var(--color-inverse);
    box-shadow: var(--shadow);
  }

  .panel-datos p {
    max-inline-size: 62ch;
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    align-content: start;
  }

  .chips li {
    padding-block: 0.4rem;
    padding-inline: 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 800;
  }

  .chips li:nth-child(2),
  .chips li:nth-child(6) { background: var(--color-mustard); }

  .chips li:nth-child(3),
  .chips li:nth-child(7) { background: var(--color-terra); }

  .chips li:nth-child(4),
  .chips li:nth-child(8) { background: var(--color-sage); }

  .chips li.chip-azul {
    background: var(--color-pale-blue);
    color: var(--color-navy);
  }

  .pie .marca {
    display: inline-flex;
    margin-block-end: var(--space-sm);
  }

  .periodo {
    position: relative;
    display: flex;
    inline-size: fit-content;
    gap: 0.25rem;
    margin-block: 0 var(--space-lg);
    margin-inline: auto;
    padding: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
  }

  .periodo input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .periodo label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-inline: 1.15rem;
    border-radius: var(--radius-pill);
    font-weight: 800;
    cursor: pointer;
  }

  .periodo input:checked + label {
    background: var(--color-navy);
    color: var(--color-inverse);
  }

  .periodo input:focus-visible + label {
    outline: var(--focus-ring);
    outline-offset: 3px;
  }

  .pago-error:not(:empty) {
    margin-block: var(--space-md);
    font-weight: 800;
  }

  a[aria-busy="true"] {
    cursor: progress;
  }

  .tarjetas {
    display: grid;
    gap: var(--space-md);
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
  }

  .tarjeta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .tarjeta-mostaza { background: var(--color-mustard); }
  .tarjeta-salvia { background: var(--color-sage); }
  .tarjeta-terracota { background: var(--color-terra); }

  .precio-linea {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin: 0;
  }

  .precio-periodo {
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .precio-anual { display: none; }

  .periodo:has(#periodo-anual:checked) ~ .tarjetas .precio-mensual { display: none; }
  .periodo:has(#periodo-anual:checked) ~ .tarjetas .precio-linea.precio-anual { display: flex; }
  .periodo:has(#periodo-anual:checked) ~ .tarjetas a.precio-anual { display: inline-flex; }

  .tabla-marco {
    container-type: inline-size;
    max-inline-size: 100%;
    margin-block: var(--space-lg);
  }

  .tabla-marco table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .tabla-marco thead {
    display: none;
  }

  .tabla-marco tbody {
    display: grid;
    gap: var(--space-md);
  }

  .tabla-marco tr {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }

  .tabla-marco tr:nth-child(1) { background: var(--color-mustard); }
  .tabla-marco tr:nth-child(2) { background: var(--color-sage); }
  .tabla-marco tr:nth-child(3) { background: var(--color-terra); }

  .tabla-marco th,
  .tabla-marco td {
    display: block;
    padding: 0;
    border: 0;
    text-align: start;
    white-space: normal;
    background: transparent;
  }

  .tabla-marco th {
    font-size: var(--text-lg);
    font-weight: 800;
  }

  .precio-etiqueta {
    display: block;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .precio-base {
    font-size: var(--text-3xl);
    font-weight: 800;
  }

  .precio-accion {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
  }

  .condiciones {
    margin-block-start: var(--space-lg);
    padding-inline-start: 1.2rem;
  }

  .condiciones li {
    margin-block: 0.4rem;
  }

  .faq-item {
    border-block-start: 1px solid var(--color-line);
  }

  .faq-item:last-child {
    border-block-end: 1px solid var(--color-line);
  }

  .faq summary h3 {
    margin: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: var(--leading-snug);
    text-wrap: balance;
    cursor: pointer;
    list-style: none;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::marker {
    content: "";
  }

  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 160ms ease;
  }

  .faq-item[open] summary::after {
    transform: translateY(0.12rem) rotate(225deg);
  }

  .faq summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
  }

  .faq-item p {
    margin-block: 0 var(--space-md);
  }

  .prosa a,
  .faq a,
  .registro a,
  .documento a,
  .pie a,
  .pie-cookies {
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-skip-ink: auto;
  }

  .pie-cookies {
    display: inline-block;
    margin-block-start: var(--space-sm);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
  }

  .consentimiento {
    position: fixed;
    z-index: 40;
    inset-inline: var(--space-md);
    inset-block-end: var(--space-md);
    display: flex;
    justify-content: center;
  }

  .consentimiento[hidden] {
    display: none;
  }

  .consentimiento-caja {
    inline-size: min(100%, 36rem);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow);
  }

  .consentimiento-caja p + p {
    margin-block-start: var(--space-sm);
  }

  .consentimiento-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
  }

  .consentimiento-acciones .button {
    flex: 1 1 9rem;
  }

  .claves {
    margin-block: var(--space-lg);
    padding-inline-start: 1.4rem;
  }

  .claves li {
    margin-block: 0.35rem;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .claves-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .configuracion {
    margin-block-start: var(--space-xl);
  }

  .configuracion h2 {
    margin-block-end: var(--space-md);
  }

  .configuracion ol {
    display: grid;
    gap: var(--space-md);
    margin: 0;
    padding-inline-start: 1.4rem;
  }

  .configuracion li {
    padding-inline-start: 0.2rem;
  }

  .configuracion p {
    margin-block: 0 var(--space-sm);
  }

  .configuracion-nota {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .guias {
    display: grid;
    gap: var(--space-md);
  }

  .guias a {
    display: block;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
  }

  .guias a p {
    margin-block-start: var(--space-xs);
    color: var(--color-ink-soft);
  }

  .documento blockquote {
    margin-block: var(--space-md);
    margin-inline: 0;
    padding-inline-start: var(--space-md);
    border-inline-start: 0.28rem solid var(--color-navy);
  }

  .llamada {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .llamada-caja {
    max-inline-size: 46rem;
    margin-inline: auto;
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-paper-deep);
    text-align: center;
  }

  .llamada-caja p,
  .llamada-caja h2 {
    margin-inline: auto;
  }

  .llamada-caja p {
    margin-block-start: var(--space-sm);
    color: var(--color-ink-soft);
  }

  .llamada-caja .button {
    margin-block-start: var(--space-lg);
  }

  .pie {
    padding-block: var(--space-xl) var(--space-2xl);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
  }

  .pie nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
  }

  .pie [aria-current="page"] {
    font-weight: 800;
    text-decoration-thickness: 2px;
  }

  .documento {
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .documento .envoltorio {
    max-inline-size: 46rem;
  }

  .documento h1 {
    margin-block-end: var(--space-lg);
    font-size: var(--text-2xl);
  }

  .documento h2 {
    margin-block-start: var(--space-xl);
    margin-block-end: var(--space-sm);
    font-size: var(--text-lg);
  }

  .documento h3 {
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-xs);
  }

  .documento p,
  .documento li {
    margin-block-end: var(--space-sm);
  }

  .documento ul,
  .documento ol {
    margin-block-end: var(--space-md);
    padding-inline-start: 1.2rem;
  }

  .documento .tabla-marco thead {
    display: table-header-group;
  }

  .documento .tabla-marco tbody,
  .documento .tabla-marco tr,
  .documento .tabla-marco th,
  .documento .tabla-marco td {
    display: revert;
  }

  .documento .tabla-marco {
    overflow: auto;
    max-inline-size: 100%;
    border-radius: var(--radius);
  }

  .documento table {
    inline-size: 100%;
    min-inline-size: 36rem;
    border-collapse: collapse;
  }

  .documento th,
  .documento td {
    padding: 0.7rem 0.8rem;
    border-block-end: 1px solid var(--color-line);
    text-align: start;
    white-space: nowrap;
    background: var(--color-surface);
  }

  .documento thead th {
    background: var(--color-paper-deep);
  }

  section[id] {
    scroll-margin-block-start: calc(var(--header-h) + var(--space-sm));
  }

  @media (width >= 720px) {
    .pasos,
    .tarjetas {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (width >= 960px) {
    .tarjetas {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (width >= 960px) {
    .hero-rejilla {
      grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1fr);
      column-gap: var(--space-2xl);
      align-items: center;
    }

    .hero-intro { grid-column: 1; grid-row: 1; align-self: center; }
    .hero-cierre { grid-column: 1; grid-row: 2; }
    .hero-video { grid-column: 2; grid-row: 1; align-self: center; }

    .panel-datos {
      grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.85fr);
      align-items: center;
    }

    .panel-datos > .pildora { grid-column: 1; grid-row: 1; }
    .panel-datos-texto { grid-column: 1; grid-row: 2; align-self: center; }
    .panel-datos-chips { grid-column: 2; grid-row: 2; align-self: center; }

    .panel-datos .chips {
      justify-content: end;
    }

    .pasos {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @container (width >= 48rem) {
    .tabla-marco tbody {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .faq summary::after {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  html {
    scrollbar-color: var(--color-ink) var(--color-paper);
    scrollbar-width: auto;
  }

  .pildora,
  .pasos li,
  .tabla-marco tr,
  .button {
    outline: 1px solid var(--color-ink);
  }
}

@media (forced-colors: active) {
  .button,
  .menu,
  .pildora,
  .pasos li,
  .tabla-marco tr,
  .panel-datos,
  .video,
  .llamada-caja {
    border: 1px solid ButtonText;
  }

}

@media print {
  .cabecera,
  .menu,
  .skip,
  .hero-video {
    display: none;
  }

  body {
    background: white;
  }
}