/* Ovis — vidriera. Todos los valores salen de tokens.css. Mobile-first. */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body {
    margin: 0;
    font-family: var(--fuente);
    font-size: var(--t-base);
    line-height: var(--interlinea);
    background: var(--tinta);
    color: var(--texto-sobre-crema);
    -webkit-font-smoothing: antialiased;
    caret-color: var(--caret);
    overflow-x: hidden;
  }
  img { max-width: 100%; height: auto; display: block; }
  h1, h2, h3, p { margin: 0; }
  ::selection { background: var(--seleccion-fondo); color: var(--seleccion-texto); }
  .tema-tinta ::selection { background: var(--crema); color: var(--tinta); }
  a { color: inherit; text-underline-offset: var(--subrayado-offset); }
  :focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-sm); }
  .tema-tinta :focus-visible { box-shadow: var(--foco-sobre-tinta); }
  .precio, time, .problema__hora, .pasos__n { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}

@layer components {
  /* ---------- Estructura ---------- */
  .contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
  .contenedor--angosto { max-width: 48rem; }
  .seccion { padding-block: var(--e-8); }
  @media (min-width: 64rem) { .seccion { padding-block: var(--e-9); } }

  .tema-tinta { background: var(--tinta); color: var(--texto-sobre-tinta); }
  .tema-crema { background: var(--crema); color: var(--texto-sobre-crema); }
  .tema-papel { background: var(--crema-2); color: var(--texto-sobre-crema); }

  .saltar { position: absolute; left: -999px; top: var(--e-2); z-index: 100; background: var(--crema); color: var(--tinta); padding: var(--e-2) var(--e-4); border-radius: var(--radio-pildora); }
  .saltar:focus { left: var(--e-2); }

  /* ---------- Tipografía ---------- */
  .etiqueta {
    font-size: var(--t-xs);
    font-weight: var(--peso-medio);
    letter-spacing: var(--tracking-etiqueta);
    text-transform: uppercase;
    color: var(--suave-sobre-crema);
    margin-bottom: var(--e-4);
  }
  .tema-tinta .etiqueta { color: var(--suave-sobre-tinta); }
  .titular {
    font-size: var(--t-3xl);
    font-weight: var(--peso-fuerte);
    letter-spacing: var(--tracking-titular);
    line-height: var(--interlinea-titular);
    text-wrap: balance;
  }
  .titular--2 { font-size: var(--t-2xl); max-width: 22ch; margin-bottom: var(--e-7); }
  .titular em {
    font-family: var(--fuente-acento);
    font-style: italic;
    font-weight: var(--peso-normal);
    letter-spacing: -0.01em;
  }
  h3 { font-size: var(--t-lg); font-weight: var(--peso-fuerte); letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--e-2); }

  .icono { width: 1.25em; height: 1.25em; flex: none; }

  /* ---------- Botones ---------- */
  .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: var(--alto-boton);
    padding-inline: var(--e-5);
    border-radius: var(--radio-pildora);
    font-weight: var(--peso-medio);
    font-size: var(--t-base);
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
    white-space: nowrap;
  }
  .boton:active { transform: scale(0.97); }
  .boton--crema { background: var(--crema); color: var(--tinta); }
  .boton--crema:hover { background: var(--papel); }
  .boton--tinta { background: var(--tinta); color: var(--crema); }
  .boton--tinta:hover { background: var(--tinta-3); }
  .boton--linea-crema { border-color: var(--tinta-3); color: var(--crema); }
  .boton--linea-crema:hover { border-color: var(--suave-sobre-tinta); }
  .boton--chico { min-height: 2.75rem; padding-inline: var(--e-4); font-size: var(--t-sm); }
  .boton--ancho { width: 100%; }
  .acciones { display: flex; flex-direction: column; gap: var(--e-3); }
  @media (min-width: 30rem) { .acciones { flex-direction: row; flex-wrap: wrap; } }

  .enlace { display: inline-flex; align-items: center; gap: var(--e-1); font-weight: var(--peso-medio); margin-top: var(--e-5); min-height: 2.75rem; }

  /* ---------- Nav ---------- */
  .nav { position: sticky; top: 0; z-index: 50; background: var(--tinta); color: var(--crema); border-bottom: 1px solid var(--tinta-3); }
  .nav__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 4rem; }
  .nav__links { display: none; gap: var(--e-6); font-size: var(--t-sm); }
  .nav__links a { text-decoration: none; color: var(--suave-sobre-tinta); padding-block: var(--e-2); }
  .nav__links a:hover { color: var(--crema); }
  @media (min-width: 56rem) { .nav__links { display: flex; } }
  .marca { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; min-height: 2.75rem; }
  .marca__simbolo { width: 2rem; height: 2rem; }
  .marca__nombre { font-size: 1.5rem; font-weight: var(--peso-fuerte); letter-spacing: -0.05em; }
  .nav :focus-visible { box-shadow: var(--foco-sobre-tinta); }

  /* ---------- Hero ---------- */
  .hero { padding-block: var(--e-7) var(--e-8); overflow: hidden; }
  .hero__grilla { display: grid; gap: var(--e-8); align-items: center; }
  @media (min-width: 60rem) { .hero__grilla { grid-template-columns: 1.15fr 0.85fr; padding-block: var(--e-6); } }
  .hero .titular { margin-bottom: var(--e-5); }
  .hero__bajada { font-size: var(--t-lg); color: var(--suave-sobre-tinta); max-width: 34ch; margin-bottom: var(--e-6); }
  .hero__nota { margin-top: var(--e-4); font-size: var(--t-sm); color: var(--suave-sobre-tinta); }

  /* ---------- Teléfono (mockup) ---------- */
  .telefono {
    width: min(100%, 20rem);
    margin-inline: auto;
    padding: 0.6rem;
    border-radius: 2.6rem;
    background: var(--tinta-3);
    box-shadow: 0 0 0 1px #333230, 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 120px -20px rgba(242, 237, 228, 0.12);
    rotate: 2deg;
  }
  .telefono__pantalla { border-radius: 2.1rem; overflow: hidden; background: var(--crema); color: var(--tinta); min-height: 32rem; display: flex; flex-direction: column; }
  .chat__cabecera { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-5) var(--e-4) var(--e-3); background: var(--tinta); color: var(--crema); font-size: var(--t-sm); }
  .chat__cabecera strong { display: block; line-height: 1.2; }
  .chat__cabecera small { color: var(--suave-sobre-tinta); font-size: var(--t-xs); }
  .chat__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--crema); color: var(--tinta); font-weight: var(--peso-fuerte); }
  .chat { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) var(--e-3); flex: 1; }
  .chat__dia { align-self: center; font-size: var(--t-xs); color: var(--suave-sobre-crema); background: var(--crema-2); padding: 2px var(--e-3); border-radius: var(--radio-pildora); margin-bottom: var(--e-1); }
  .burbuja { max-width: 85%; padding: var(--e-2) var(--e-3); border-radius: 1rem; font-size: var(--t-sm); line-height: 1.4; }
  .burbuja time { display: block; text-align: right; font-size: 0.6875rem; opacity: 0.6; margin-top: 2px; }
  .burbuja--ella { align-self: flex-start; background: var(--papel); border-bottom-left-radius: 0.3rem; box-shadow: 0 1px 0 var(--crema-3); }
  .burbuja--ovis { align-self: flex-end; background: var(--tinta); color: var(--crema); border-bottom-right-radius: 0.3rem; }
  .chat__aviso { align-self: center; display: inline-flex; align-items: center; gap: var(--e-1); margin-top: var(--e-2); font-size: var(--t-xs); font-weight: var(--peso-medio); background: var(--papel); border: 1px solid var(--crema-3); padding: var(--e-1) var(--e-3); border-radius: var(--radio-pildora); }

  /* Entrada de la charla: solo con JS, con red de seguridad en main.js */
  .js .telefono[data-animar] .chat > * { opacity: 0; translate: 0 8px; transition: opacity var(--medio) var(--curva), translate var(--medio) var(--curva); }
  .js .telefono[data-animar] .chat > .visible { opacity: 1; translate: 0 0; }

  /* ---------- Problema ---------- */
  .grilla-3 { display: grid; gap: var(--e-4); }
  @media (min-width: 48rem) { .grilla-3 { grid-template-columns: repeat(3, 1fr); } }
  .problema { background: var(--papel); border-radius: var(--radio); padding: var(--e-6) var(--e-5); border: 1px solid var(--crema-3); }
  .problema__hora { display: inline-block; font-size: var(--t-xl); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titular); margin-bottom: var(--e-5); }
  .problema p { color: var(--suave-sobre-crema); }

  /* ---------- Funciones ---------- */
  .funciones { display: grid; gap: var(--e-4); }
  @media (min-width: 48rem) { .funciones { grid-template-columns: repeat(2, 1fr); } .funcion--grande { grid-column: 1 / -1; } }
  @media (min-width: 64rem) { .funciones { grid-template-columns: repeat(4, 1fr); } .funcion--grande { grid-column: 1 / -1; } }
  .funcion { background: var(--papel); border-radius: var(--radio-lg); padding: var(--e-6) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
  .funcion p { color: var(--suave-sobre-crema); }
  .funcion--grande { background: var(--tinta); color: var(--crema); display: grid; gap: var(--e-6); }
  .funcion--grande p { color: var(--suave-sobre-tinta); }
  @media (min-width: 48rem) { .funcion--grande { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--e-7); } }
  .funcion__detalle { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--tinta-3); }

  .mini { margin-top: auto; padding-top: var(--e-5); }
  .mini--chat { display: flex; flex-direction: column; gap: var(--e-2); background: var(--crema); border-radius: var(--radio); padding: var(--e-4); color: var(--tinta); }
  .mini--chat .burbuja--ella { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--tinta); }
  .mini--chat .burbuja--ovis { color: var(--crema); }
  .mini--agenda { display: grid; gap: 6px; }
  .franja { display: grid; grid-template-columns: 3rem 1fr; gap: var(--e-2); align-items: center; font-size: var(--t-xs); }
  .franja span { color: var(--suave-sobre-crema); }
  .franja b { background: var(--tinta); color: var(--crema); border-radius: var(--radio-sm); padding: var(--e-2) var(--e-3); font-weight: var(--peso-medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .franja--libre b { background: transparent; color: var(--suave-sobre-crema); border: 1.5px dashed var(--crema-3); }
  .mini--aviso { display: flex; gap: var(--e-3); align-items: center; background: var(--crema); border-radius: var(--radio); padding: var(--e-3); font-size: var(--t-xs); margin-top: auto; }
  .mini--aviso .icono { width: 2.25rem; height: 2.25rem; padding: 6px; background: var(--tinta); color: var(--crema); border-radius: 0.6rem; }
  .mini--aviso b { display: block; font-size: var(--t-sm); }
  .mini--lista { display: grid; gap: 6px; }
  .mini--lista div { display: flex; justify-content: space-between; gap: var(--e-2); background: var(--crema); border-radius: var(--radio-sm); padding: var(--e-2) var(--e-3); font-size: var(--t-xs); }
  .mini--lista span { color: var(--suave-sobre-crema); }
  .mini--barras { display: flex; align-items: flex-end; gap: 6px; height: 6rem; }
  .mini--barras span { flex: 1; height: var(--h); background: var(--tinta); border-radius: 6px 6px 2px 2px; }
  .mini--barras span:not(:last-child) { opacity: 0.25; }

  .honestidad { display: flex; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-6); max-width: 46rem; color: var(--suave-sobre-crema); }
  .honestidad .icono { width: 1.75rem; height: 1.75rem; color: var(--tinta); }
  .honestidad strong { color: var(--tinta); }

  /* ---------- Pasos ---------- */
  .pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
  @media (min-width: 48rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }
  .pasos li { border: 1px solid var(--tinta-3); background: var(--tinta-2); border-radius: var(--radio-lg); padding: var(--e-6) var(--e-5); }
  .pasos p { color: var(--suave-sobre-tinta); }
  .pasos__n { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--crema); color: var(--tinta); font-weight: var(--peso-fuerte); margin-bottom: var(--e-5); }

  /* ---------- Caso ---------- */
  .caso { display: grid; gap: var(--e-7); align-items: center; }
  @media (min-width: 60rem) { .caso { grid-template-columns: 1fr 1fr; } }
  .caso__texto > p:not(.etiqueta) { color: var(--suave-sobre-crema); margin-bottom: var(--e-4); max-width: 40ch; }
  .caso__texto strong { color: var(--tinta); }
  .caso .titular--2 { margin-bottom: var(--e-5); }
  .caso__pantallas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
  .captura { margin: 0; }
  .captura img { aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border-radius: var(--radio); border: 6px solid var(--tinta); background: var(--papel); }
  .captura--baja { margin-top: var(--e-7); }
  .captura figcaption { font-size: var(--t-xs); color: var(--suave-sobre-crema); margin-top: var(--e-2); text-align: center; }

  /* ---------- Planes ---------- */
  .pais { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-6); }
  @media (min-width: 40rem) { .pais { flex-direction: row; align-items: center; gap: var(--e-4); } }
  .pais__pregunta { font-weight: var(--peso-medio); }
  .segmentado { display: inline-flex; padding: 4px; border-radius: var(--radio-pildora); background: var(--crema); border: 1px solid var(--crema-3); }
  .segmentado button {
    font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio);
    min-height: 2.75rem; padding-inline: var(--e-4);
    border: 0; border-radius: var(--radio-pildora); cursor: pointer;
    background: transparent; color: var(--suave-sobre-crema);
    transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
  }
  .segmentado button[aria-checked='true'] { background: var(--tinta); color: var(--crema); }

  .planes { display: grid; gap: var(--e-4); max-width: 32rem; }
  .plan { background: var(--papel); border-radius: var(--radio-lg); padding: var(--e-6) var(--e-5); display: flex; flex-direction: column; border: 1px solid var(--crema-3); position: relative; }
  @media (min-width: 52rem) { .plan { padding: var(--e-7) var(--e-6); } }
  .plan--destacado { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
  .plan__sello { position: absolute; top: calc(var(--e-4) * -1); left: var(--e-5); background: var(--crema); color: var(--tinta); font-size: var(--t-xs); font-weight: var(--peso-fuerte); padding: var(--e-1) var(--e-3); border-radius: var(--radio-pildora); border: 1px solid var(--tinta); }
  .plan__nombre { font-size: var(--t-xl); letter-spacing: var(--tracking-titular); }
  .plan__para { color: var(--suave-sobre-crema); margin-bottom: var(--e-5); }
  .plan--destacado .plan__para { color: var(--suave-sobre-tinta); }
  .precio { padding-block: var(--e-5); border-block: 1px solid var(--crema-3); margin-bottom: var(--e-5); }
  .plan--destacado .precio { border-color: var(--tinta-3); }
  .precio__monto { font-size: var(--t-2xl); font-weight: var(--peso-fuerte); letter-spacing: var(--tracking-titular); line-height: 1.1; }
  .precio__por { color: var(--suave-sobre-crema); margin-left: var(--e-1); }
  .plan--destacado .precio__por, .plan--destacado .precio__setup { color: var(--suave-sobre-tinta); }
  .precio__setup { color: var(--suave-sobre-crema); font-size: var(--t-sm); margin-top: var(--e-1); }
  .precio__setup span { font-weight: var(--peso-fuerte); color: inherit; }
  .precio [data-cargando] { opacity: 0.4; }
  .incluye { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: grid; gap: var(--e-3); }
  .incluye li { padding-left: 1.75rem; position: relative; }
  .incluye li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 1rem; height: 0.55rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: 0 -0.15rem; }
  .plan .boton { margin-top: auto; }
  .planes__nota { margin-top: var(--e-5); font-size: var(--t-sm); color: var(--suave-sobre-crema); }
  .planes__sin-packs { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--suave-sobre-crema); max-width: 60ch; }

  /* ---------- FAQ ---------- */
  .faq { border-top: 1px solid var(--crema-3); }
  .faq details { border-bottom: 1px solid var(--crema-3); }
  .faq summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
    min-height: 3.75rem; padding-block: var(--e-4);
    font-size: var(--t-lg); font-weight: var(--peso-medio);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; font-size: 1.5rem; font-weight: var(--peso-normal); transition: rotate var(--rapido) var(--curva); flex: none; }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details p { padding-bottom: var(--e-5); color: var(--suave-sobre-crema); max-width: 60ch; }

  /* ---------- Cierre y pie ---------- */
  .cierre { padding-block: var(--e-9); text-align: center; }
  .cierre__caja { display: flex; flex-direction: column; align-items: center; }
  .cierre__simbolo { width: 4.5rem; height: 4.5rem; margin-bottom: var(--e-6); }
  .cierre .titular--2 { margin-inline: auto; margin-bottom: var(--e-6); }
  .pie { border-top: 1px solid var(--tinta-3); padding-block: var(--e-6) calc(var(--e-6) + 4rem); font-size: var(--t-sm); color: var(--suave-sobre-tinta); }
  .pie__fila { display: flex; flex-direction: column; gap: var(--e-3); align-items: flex-start; }
  @media (min-width: 40rem) { .pie__fila { flex-direction: row; justify-content: space-between; align-items: center; } .pie { padding-bottom: var(--e-6); } }
  .marca--pie { color: var(--crema); }

  /* ---------- WhatsApp flotante (solo celular) ---------- */
  .flotante {
    position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 40;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--crema); color: var(--tinta);
    box-shadow: 0 0 0 1px var(--tinta), 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  }
  .flotante .icono { width: 1.75rem; height: 1.75rem; }
  @media (min-width: 56rem) { .flotante { display: none; } }
}