/* =====================================================================
   DOMO — la web del estudio
   ---------------------------------------------------------------------
   Un solo archivo de estilos, sin frameworks, sin librerías.

   POR QUÉ SIN FRAMEWORK, QUE ACÁ ES UNA DECISIÓN Y NO UNA CARENCIA
   Esta página es el argumento de venta del estudio: quien la mira está
   evaluando si sabemos hacer webs. Un sitio que arranca bajando 300 KB de
   JavaScript para mostrar seis párrafos dice lo contrario de lo que
   queremos decir. Acá el navegador baja un HTML y un CSS, y la página está.

   Y hay un motivo comercial: al comerciante lo miramos en el celular, en la
   calle, con mala señal. Si tarda cuatro segundos, se fue.

   ORDEN DEL ARCHIVO
     1. Fichas de color y medidas
     2. Base y tipografía
     3. Piezas que se repiten (botones, secciones)
     4. Cada bloque de la página, en el orden en que se ve
     5. Celular
   ===================================================================== */


/* --- 1. Fichas ---------------------------------------------------------
   Los tres colores de la marca salen de marca/generar-marca.py, que es de
   donde salen también el logo y las publicaciones. Un solo lugar.

   Contrastes MEDIDOS, no estimados (los mismos que se usaron en goodlook,
   donde esto ya se había hecho a mano):
     --tinta   sobre --papel  →  17,4:1   textos y títulos
     --gris    sobre --papel  →   5,3:1   párrafos secundarios: pasa AA
     --naranja sobre --papel  →   3,3:1   SÓLO para trazos grandes y fondos,
                                          NUNCA para texto chico
     --papel   sobre --naranja →   3,3:1   idem: el botón usa 22 px en negrita
   ------------------------------------------------------------------- */
:root {
    --naranja:      #FF5A1F;
    --naranja-hond: #D93F09;   /* para texto sobre claro: 4,8:1, sí pasa AA */
    --tinta:        #0E1116;
    --tinta-suave:  #3A424E;
    --gris:         #6E7480;
    --papel:        #FFFFFF;
    --hueso:        #F5F2ED;
    --linea:        #E6E1D9;

    /* Un solo radio en toda la página. Mezclar radios distintos es lo que
       hace que un sitio se vea "armado con piezas de otros lados". */
    --radio: 14px;
    --radio-chico: 9px;

    /* El ancho de lectura. Más de 70 caracteres por renglón y el ojo se
       pierde al volver al principio de la línea siguiente. */
    --ancho: 1120px;
    --ancho-texto: 62ch;

    --borde-pagina: clamp(20px, 5vw, 56px);
}


/* --- 2. Base ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    /* Los anclas del menú no quedan pegadas al borde de arriba. */
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

/* Quien pidió menos movimiento en su sistema no tiene por qué pelearse con
   nuestra página. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    background: var(--papel);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; }
h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.015em; }

p { text-wrap: pretty; }

/* El anillo de foco: se ve sólo cuando se navega con el teclado, y se ve
   BIEN. Sacarlo es la forma más rápida de dejar afuera a alguien. */
:where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--naranja);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Se salta el menú y se cae en el contenido. Sólo aparece con Tab. */
.saltar {
    position: absolute;
    left: 12px;
    top: -70px;
    z-index: 200;
    background: var(--tinta);
    color: var(--papel);
    padding: 12px 20px;
    border-radius: var(--radio-chico);
    font-weight: 700;
    text-decoration: none;
    transition: top .18s;
}
.saltar:focus { top: 12px; }


/* --- 3. Piezas que se repiten ------------------------------------------ */

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--borde-pagina);
}

.seccion { padding-block: clamp(64px, 9vw, 118px); }
.seccion-hueso { background: var(--hueso); }

/* La volanta naranja arriba de cada título. Es el hilo que hace que las
   secciones se lean como partes de lo mismo. Va en --naranja-hond y no en
   --naranja porque es texto chico: el naranja puro da 3,3:1 y no alcanza. */
.volanta {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--naranja-hond);
    margin-bottom: 14px;
}

.bajada {
    margin-top: 18px;
    font-size: 1.13rem;
    line-height: 1.6;
    color: var(--tinta-suave);
    max-width: var(--ancho-texto);
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--naranja);
    color: #fff;
    /* 1.05rem en negrita: a este tamaño el 3,3:1 del naranja alcanza. Con
       texto más chico habría que oscurecerlo. */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    padding: 17px 30px;
    border-radius: 999px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    box-shadow: 0 8px 22px rgba(255, 90, 31, .26);
}
.boton:hover { background: var(--naranja-hond); transform: translateY(-2px);
               box-shadow: 0 12px 28px rgba(255, 90, 31, .32); }
.boton:active { transform: translateY(0); }

.boton-linea {
    background: transparent;
    color: var(--tinta);
    box-shadow: inset 0 0 0 1.5px var(--tinta);
}
.boton-linea:hover { background: var(--tinta); color: var(--papel);
                     box-shadow: inset 0 0 0 1.5px var(--tinta); }

/* El domo del logo, dibujado con CSS. No es una imagen: no hay que bajar
   nada y se puede pintar de cualquier color desde acá. */
.domo {
    width: 34px;
    height: 17px;
    background: var(--naranja);
    border-radius: 34px 34px 0 0;
    flex: 0 0 auto;
}


/* --- 4. Los bloques, en orden ------------------------------------------ */

/* ····· Encabezado ····································································
   Fijo arriba y semitransparente. Se queda a la vista porque el botón de
   WhatsApp tiene que estar siempre a un toque: quien se decide a la mitad
   de la página no tiene por qué buscar cómo escribirnos. */
.encabezado {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--linea);
}

.encabezado-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 72px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.16rem;
    letter-spacing: .17em;
}

.menu { display: flex; align-items: center; gap: 30px; }

.menu a {
    text-decoration: none;
    font-size: .97rem;
    font-weight: 600;
    color: var(--tinta-suave);
    transition: color .15s;
}
.menu a:hover { color: var(--naranja-hond); }

.menu .boton { padding: 12px 22px; font-size: .97rem; }

/* ····· Portada ······································································· */
.portada {
    padding-top: clamp(56px, 8vw, 96px);
    padding-bottom: clamp(56px, 8vw, 92px);
    position: relative;
    overflow: hidden;
}

/* El domo gigante del fondo. Es la forma de la marca, agrandada y casi
   transparente: repite la identidad sin poner otro logo dando vueltas. */
.portada::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -1px;
    width: 900px;
    height: 450px;
    background: var(--naranja);
    opacity: .07;
    border-radius: 900px 900px 0 0;
    pointer-events: none;
}

.portada .contenedor { position: relative; z-index: 1; }

.portada h1 { max-width: 15ch; }
.portada h1 em { font-style: normal; color: var(--naranja-hond); }

.portada .bajada { font-size: 1.24rem; max-width: 46ch; }

.portada-acciones {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Las tres señales de confianza abajo de la portada. Son lo que contesta
   "¿y este quién es?" antes de que la pregunta se formule. */
.señales {
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    font-size: .95rem;
    color: var(--tinta-suave);
}
/* El > es obligatorio, no un adorno. Sin él la regla agarraba también los
   <span> de adentro y los volvía contenedores flex: el <b> pasaba a ser un
   ítem con 9 px de separación a cada lado, y quedaba "100% online , en todo
   el país" con un espacio antes de la coma. */
.señales > span { display: flex; align-items: center; gap: 9px; }
.señales b { font-weight: 700; color: var(--tinta); }

.punto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--naranja);
    flex: 0 0 auto;
}

/* ····· Los demos en vivo ·····························································
   ESTO ES LO QUE DIFERENCIA A LA PÁGINA. Cualquier estudio muestra
   capturas de sus trabajos; acá el visitante scrollea una tienda de verdad
   sin salir del sitio.

   Son las dos tiendas de muestra que ya se habían hecho para los videos de
   Instagram: negocios inventados, sin marcas ni modelos, así que se pueden
   mostrar sin pedirle permiso a ningún cliente. */
.demos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(28px, 4vw, 52px);
    margin-top: 52px;
}

.demo { display: flex; flex-direction: column; align-items: center; }

.demo-texto { text-align: center; margin-bottom: 24px; max-width: 34ch; }
.demo-texto p { margin-top: 8px; color: var(--tinta-suave); font-size: 1rem; }

/* El teléfono. El marco oscuro es lo que hace que el iframe de adentro se
   lea como "una web en un celular" y no como un recuadro con scroll. */
.telefono {
    width: 100%;
    max-width: 392px;
    background: #12151b;
    border-radius: 46px;
    padding: 11px;
    box-shadow: 0 30px 60px rgba(14, 17, 22, .18),
                0 6px 18px rgba(14, 17, 22, .10);
}

.telefono iframe {
    width: 100%;
    height: 640px;
    border: 0;
    border-radius: 36px;
    background: #fff;
}

.demo-pie {
    margin-top: 18px;
    font-size: .93rem;
    color: var(--gris);
    text-align: center;
}
.demo-pie a { color: var(--naranja-hond); font-weight: 600; }

/* ····· Lista de lo que incluye ······················································· */
.lista-incluye {
    list-style: none;
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 30px 46px;
}

.lista-incluye li {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 16px;
    align-items: start;
}

/* El tilde dibujado con CSS y no con un emoji ✓: el emoji lo resuelve cada
   sistema con su propia fuente y cambia de forma y tamaño sin avisar. */
.tilde {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--naranja);
    position: relative;
    margin-top: 2px;
}
.tilde::after {
    content: "";
    position: absolute;
    left: 11px; top: 9px;
    width: 9px; height: 15px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(43deg);
}

.lista-incluye h3 { margin-bottom: 5px; }
.lista-incluye p { color: var(--tinta-suave); font-size: 1rem; }

/* ····· Pasos ········································································· */
.pasos {
    counter-reset: paso;
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 34px;
}

.paso { position: relative; padding-top: 62px; }

.paso::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute;
    top: 0; left: 0;
    font-size: 3.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--naranja);
    opacity: .32;
}

.paso h3 { margin-bottom: 7px; }
.paso p { color: var(--tinta-suave); font-size: 1rem; }

/* ····· Precios ······································································· */
.planes {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
}

.plan {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
}

/* El que queremos que elija. El abono es lo que sostiene el estudio: diez
   clientes con abono son ingreso que entra sin vender nada nuevo. */
.plan-destacado {
    border-color: var(--naranja);
    box-shadow: 0 0 0 1px var(--naranja), 0 14px 34px rgba(255, 90, 31, .12);
}

.plan-etiqueta {
    align-self: flex-start;
    background: var(--naranja);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.plan h3 { font-size: 1.42rem; }

.plan-precio {
    margin-top: 12px;
    font-size: 2.05rem;
    font-weight: 800;
    letter-spacing: -.035em;
}
.plan-precio small {
    display: block;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--gris);
    margin-top: 3px;
}

.plan ul {
    list-style: none;
    margin: 20px 0 26px;
    display: grid;
    gap: 10px;
    font-size: .99rem;
    color: var(--tinta-suave);
}
.plan li { display: flex; gap: 10px; align-items: start; }
.plan li::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--naranja);
    margin-top: 9px;
    flex: 0 0 auto;
}

.plan .boton { margin-top: auto; justify-content: center; }

.nota-precios {
    margin-top: 26px;
    font-size: .95rem;
    color: var(--gris);
    max-width: var(--ancho-texto);
}

/* ····· Preguntas ····································································· */
.preguntas { margin-top: 44px; max-width: 780px; }

.pregunta {
    border-bottom: 1px solid var(--linea);
}

.pregunta summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 44px 22px 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    position: relative;
}
.pregunta summary::-webkit-details-marker { display: none; }

/* La cruz que se convierte en menos al abrir. Dos rayas y una rotación:
   sin imágenes y sin JavaScript. */
.pregunta summary::before,
.pregunta summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 17px; height: 2.5px;
    background: var(--naranja);
    border-radius: 2px;
    transition: transform .22s ease;
}
.pregunta summary::after { transform: rotate(90deg); }
.pregunta[open] summary::after { transform: rotate(0); }

.pregunta p {
    padding: 0 20px 24px 0;
    color: var(--tinta-suave);
    max-width: var(--ancho-texto);
}

/* ····· Cierre ········································································ */
.cierre {
    background: var(--tinta);
    color: var(--papel);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cierre::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 1000px; height: 500px;
    background: var(--naranja);
    opacity: .13;
    border-radius: 1000px 1000px 0 0;
    pointer-events: none;
}

.cierre .contenedor { position: relative; z-index: 1; }
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre .bajada { color: rgba(255,255,255,.76); margin-inline: auto; text-align: center; }
.cierre .boton { margin-top: 32px; }

/* ····· Pie ··········································································· */
.pie {
    padding-block: 48px;
    border-top: 1px solid var(--linea);
    font-size: .95rem;
    color: var(--gris);
}

.pie-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.pie a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; }
.pie a:hover { color: var(--naranja-hond); }

.pie-redes { display: flex; gap: 22px; }


/* --- 5. Celular --------------------------------------------------------
   Se toca lo mínimo: casi todo el sitio ya se acomoda solo con las grillas
   de arriba. Acá va únicamente lo que no puede resolverse con auto-fit. */

@media (max-width: 760px) {
    /* En el celular el menú se queda sólo con el botón de WhatsApp. Los
       enlaces de sección se pierden y no pasa nada: la página es corta y se
       recorre bajando, que es como se lee un celular. */
    .menu a:not(.boton) { display: none; }

    .encabezado-fila { height: 64px; }

    .portada::after { width: 620px; height: 310px; right: -180px; }

    .telefono iframe { height: 560px; }

    .señales { gap: 10px 20px; font-size: .9rem; }
}

@media (max-width: 420px) {
    body { font-size: 16px; }
    .portada-acciones .boton { width: 100%; justify-content: center; }
}


/* --- Impresión ---------------------------------------------------------
   Alguien va a imprimir el presupuesto o la página. Que no salgan cuatro
   hojas negras. */
@media print {
    .encabezado, .telefono, .cierre::after, .portada::after { display: none; }
    body { font-size: 12pt; }
    .seccion { padding-block: 18pt; }
}