/* ============================================================
   casa.css — la casa de tres productos

   Va APARTE de flowfunnel.css y no dentro: aquel archivo es el diseño de la
   página de StartToFlow, que sigue existiendo igual en /starttoflow/. Esto es
   lo que aparece al haber varios productos, y se carga en las cuatro páginas
   nuevas. Separarlo deja claro qué es de quién el día que un producto quiera su
   propia cara.

   Usa los tokens de :root de flowfunnel.css y no redefine ninguno: dos
   definiciones del mismo color es como un sitio acaba con dos azules.

   ── Las decisiones, y por qué ───────────────────────────────────────────

   · EL HERO ES PARTIDO, NO CENTRADO. Texto a la izquierda, foto real a la
     derecha. Una columna sola en medio es el hero que sale por defecto.

   · TRES FAMILIAS DE SECCIÓN POR PÁGINA, sin repetir: reparto en filas,
     rejilla con una celda mayor, y franja a ancho completo. Tres secciones con
     la misma forma es lo que hace que una página se sienta plantilla.

   · LAS TARJETAS SON PARA LO QUE SE LEVANTA DEL FONDO. Donde sólo hay lista,
     hay líneas. Donde hay jerarquía de verdad, hay celda grande.

   · UNA ESCALA DE REDONDEO SOLA: la de --radio. Botones de pastilla sobre
     tarjetas cuadradas es de lo que más delata a un diseño armado a pedazos.

   · SE CONSERVA INTER, aunque la guía de diseño la desaconseje. Es la
     tipografía del sitio y estas páginas conviven con /starttoflow/, que no se
     rediseña: un tipo distinto sólo en las nuevas partiría la casa en dos.
   ============================================================ */

/* ---------- escala de titulares ----------
   `clamp` en vez de saltos por media query: el tamaño crece con la ventana y no
   hay ningún ancho en el que el titular se vea a destiempo. El tope está en 3.6
   rem porque a partir de ahí el titular de dos líneas ya no cabe en pantalla, y
   un hero que obliga a bajar para ver el botón es un hero roto. */
.display{font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:-.035em;line-height:1.05}
.display-ancho{max-width:16ch}
.display-chico{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.03em;line-height:1.12}

/* ---------- hero partido ---------- */
.hero-partido-in{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero-dice{max-width:46ch}
.hero-dice .lede{max-width:52ch;margin-top:1.1rem}
.hero-dice .hero-acciones{margin-top:1.8rem}

.hero-foto{margin:0}
.hero-foto img{width:100%;height:100%;max-height:420px;object-fit:cover;
               border-radius:var(--radio);display:block}

/* El hero de ProFlow no lleva foto: no hay ninguna que represente un producto
   que todavía no existe, y una de archivo no representa nada. El texto ocupa
   entonces su propio ancho en vez de estirarse a toda la página. */
.hero-texto .lede{max-width:56ch;margin-top:1.2rem}
.hero-texto .estado{margin-bottom:1.4rem}

/* ---------- el reparto de productos (portada) ----------
   Filas y no tres tarjetas iguales: tres cajas idénticas no dicen nada de cómo
   se relacionan los productos, y obligan a que los tres textos midan parecido
   para no verse rotos. */
.reparto{list-style:none;margin:2.6rem 0 0;padding:0;border-top:1px solid var(--linea)}
.producto{display:grid;grid-template-columns:minmax(190px,.8fr) 2fr;gap:1.4rem 2.5rem;
          padding:2.1rem 0;border-bottom:1px solid var(--linea)}
.producto-id h3{font-size:1.55rem;letter-spacing:-.03em;display:flex;align-items:center;gap:.55rem}
/* La barra del producto delante del nombre, y la fila entera marcada por la
   izquierda en su color al pasar: es lo que ata la fila a la página que abre. */
.producto-id h3::before{content:"";flex:none;width:6px;height:1.05em;border-radius:3px;
                        background:var(--prod,var(--linea))}
.producto{position:relative}
.producto::before{content:"";position:absolute;left:-1.2rem;top:2.1rem;bottom:2.1rem;
                  width:3px;border-radius:2px;background:var(--prod,transparent);
                  opacity:0;transition:opacity .2s ease}
.producto:hover::before,.producto:focus-within::before{opacity:1}
.producto-dice{max-width:62ch}
.producto-dice p{color:var(--tinta-suave)}

/* Para quién es va ARRIBA de lo que hace, y en tinta plena: quien lee está
   buscándose a sí mismo en la lista, no leyendo funciones. */
.para-quien{color:var(--tinta);font-weight:700;font-size:1.05rem;margin-bottom:.4rem}

/* El estado se lee antes que el texto porque cambia cómo se lee todo lo demás:
   no es lo mismo «disponible» que «en piloto». */
.estado{display:inline-block;font-size:.8rem;font-weight:600;line-height:1.5;
        color:var(--verde-hondo);background:#ECFDF5;border:1px solid #A7F3D0;
        border-radius:999px;padding:.15rem .7rem;margin-top:.7rem}

/* Lo que todavía no se vende NO lleva el color de lo que sí. Misma etiqueta para
   los dos estados sería prometer de más sin decir una sola palabra de más. */
.estado-piloto{color:#92400E;background:#FFFBEB;border-color:#FDE68A}

.enlace-producto{display:inline-block;margin-top:1.1rem;font-weight:700;
                 color:var(--acento);text-decoration:none;
                 border-bottom:2px solid transparent;padding-bottom:1px;
                 transition:border-color .15s ease}
.enlace-producto::after{content:" \2192";font-weight:400}
.enlace-producto:hover,.enlace-producto:focus-visible{border-bottom-color:var(--acento)}

/* ---------- rejilla con una celda mayor (DeskFlow) ----------
   Cuatro funciones, cuatro celdas: la primera vale el doble porque es la razón
   por la que alguien instala esto. Cuatro celdas iguales dirían que da lo mismo
   cuál se lea primero. */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.celda{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
       padding:1.6rem}
.celda h3{font-size:1.05rem}
.celda p{color:var(--tinta-suave);margin-top:.5rem;font-size:.97rem}
.celda-mayor{grid-column:span 3;background:var(--prod-tenue,var(--niebla));padding:2rem;
             border-color:color-mix(in srgb,var(--prod,var(--linea)) 30%,var(--linea))}
.celda-mayor h3{font-size:1.5rem;letter-spacing:-.025em}
.celda-mayor p{font-size:1.05rem;max-width:58ch}

/* ---------- dos caminos (ProFlow) ----------
   El primero arranca en un día; el segundo lleva trámite con Meta. Que se vieran
   iguales escondería la única diferencia que le importa a quien decide. */
.dos-caminos{display:grid;grid-template-columns:1.25fr 1fr;gap:1.2rem;margin-top:2.2rem;
             align-items:start}
.camino{border:1px solid var(--linea);border-radius:var(--radio);padding:1.8rem}
.camino h3{font-size:1.2rem}
.camino p{color:var(--tinta-suave);margin-top:.6rem}
.camino-directo{background:var(--prod-tenue,var(--niebla));
                border-color:color-mix(in srgb,var(--prod,#C7D2FE) 40%,var(--linea))}

/* ---------- módulos (ProFlow) ----------
   Lista con una línea por bloque, no tarjetas: son dos cosas que se contratan,
   no dos cajas que compiten. */
.modulos{margin:2.2rem 0 0;display:grid;gap:0}
.modulos > div{display:grid;grid-template-columns:minmax(150px,.5fr) 2fr;gap:1.4rem;
               padding:1.5rem 0;border-top:1px solid var(--linea)}
.modulos dt{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.modulos dd{margin:0;color:var(--tinta-suave);max-width:60ch}

/* ---------- franja de cierre ----------
   Ancho completo y fondo tenue: rompe la secuencia de secciones blancas y marca
   dónde termina la página. */
.franja{background:var(--niebla);border-top:1px solid var(--linea);
        border-bottom:1px solid var(--linea);margin-top:4rem;padding:4rem 0}
.franja-in{max-width:760px}
.franja-lede{color:var(--tinta-suave);font-size:1.1rem;margin-top:.9rem;max-width:58ch}
.franja-nota{color:var(--gris);margin-top:.7rem;max-width:58ch}
.franja .btn{margin-top:1.8rem}

/* ---------- a quién le sirve ---------- */
.lista-quien{margin:1.7rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem;max-width:62ch}
.lista-quien li{position:relative;padding-left:1.6rem;color:var(--tinta-suave)}
.lista-quien li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
                        border-radius:50%;background:var(--acento)}

/* ---------- tableta ---------- */
@media (max-width:900px){
  .hero-partido-in{grid-template-columns:1fr;gap:2rem}
  .hero-foto img{max-height:300px}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .celda-mayor{grid-column:span 2}
  .dos-caminos{grid-template-columns:1fr}
}

/* ---------- teléfono ----------
   Se declara el colapso en vez de confiar en que «ya se acomoda»: la fila de dos
   columnas es justo lo que se rompe a 360px. */
@media (max-width:720px){
  .producto{grid-template-columns:1fr;gap:.4rem;padding:1.7rem 0}
  .producto::before{display:none}
  .producto-id h3{font-size:1.3rem}
  .producto-dice{margin-top:.9rem}
  .rejilla{grid-template-columns:1fr}
  .celda-mayor{grid-column:span 1}
  .modulos > div{grid-template-columns:1fr;gap:.35rem}
  .franja{padding:3rem 0;margin-top:3rem}
}

/* Quien pidió menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion:reduce){
  .enlace-producto,.producto::before{transition:none}
}

/* ============================================================
   La propuesta aprobada en Miro (2026-10-02)
   Sólo composición: el copy es el mismo de antes, y lo nuevo está en el CMS.
   ============================================================ */

/* ---------- el sello: estado del producto ENCIMA del titular ----------
   Antes del titular porque cambia cómo se lee todo lo demás, igual que .estado
   en la portada. */
.sello{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;
       padding:.35rem .85rem;border-radius:999px;margin:0 0 1.3rem;
       background:var(--prod-tenue,#ECFDF5);color:var(--prod-hondo,var(--verde-hondo))}
.sello::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--prod,var(--verde))}
.sello-piloto{margin:0 0 1.3rem;font-size:.85rem;padding:.4rem .9rem}

/* ---------- secciones a dos columnas ----------
   El título a la izquierda y el contenido a la derecha: antes la mitad derecha de
   la página quedaba vacía en las preguntas, los módulos y las conexiones. */
.dos{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
.dos .faq,.dos .dos-caminos,.dos .modulos{margin-top:0}
.dos .modulos{grid-template-columns:1fr 1fr;gap:1rem}
.dos .modulos > div{display:block;border:1px solid var(--linea);border-radius:var(--radio);padding:1.4rem}
.dos .modulos dd{margin-top:.4rem}
.dos .dos-caminos{grid-template-columns:1fr 1fr}

/* ---------- ventana de app: el video y las capturas reales ---------- */
.ventana{margin:0;border-radius:16px;overflow:hidden;background:var(--papel);border:1px solid var(--linea);
         box-shadow:0 30px 60px -24px color-mix(in srgb,var(--prod,#64748B) 55%,transparent),0 10px 24px -12px rgba(15,23,42,.18)}
.ventana-barra{display:flex;gap:6px;padding:10px 14px;background:var(--niebla);border-bottom:1px solid var(--linea)}
.ventana-barra span{width:10px;height:10px;border-radius:50%;background:var(--linea)}
.ventana img,.ventana video{display:block;width:100%;height:auto}
.hero-partido-in > *,.hero-rej > *{min-width:0}

/* ---------- portada: la persona en el hero ---------- */
.escena{position:relative;height:470px;margin:0}
.escena-fondo{position:absolute;inset:60px 0 0 0;border-radius:28px;
  background:linear-gradient(135deg,#EEF2FF 0%,#FCEFEA 55%,#EFF8EA 100%)}
.escena .persona{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:116%;max-width:none;height:auto}
.escena .mini{position:absolute;right:-24px;top:0;width:200px;--prod:#E04E28}
.chip{position:absolute;z-index:2;display:flex;gap:.5rem;align-items:center;background:var(--papel);
      border:1px solid var(--linea);border-radius:12px;padding:.55rem .85rem;font-size:.82rem;font-weight:700;
      box-shadow:0 10px 24px -14px rgba(15,23,42,.35)}
.chip i{width:9px;height:9px;border-radius:50%}
.chip-1{left:-18px;top:80px}.chip-2{left:-30px;top:200px}.chip-3{right:-14px;top:160px}
.c-stf{background:#6CC14A}.c-pf{background:#7B7FD4}.c-df{background:#E04E28}

/* ---------- portada: tres tarjetas, una por producto ----------
   Sustituye al reparto en filas: con la imagen de cada producto arriba, las tres
   se comparan de un vistazo. El color de cada una es la barra de su producto. */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.prod{background:var(--papel);border:1px solid var(--linea);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.prod-arte{height:190px;background:var(--prod-tenue);display:flex;align-items:flex-end;justify-content:center;
           overflow:hidden;border-bottom:4px solid var(--prod)}
.prod-arte .poster{width:88%;height:auto;border-radius:10px 10px 0 0;border:1px solid var(--linea);border-bottom:0;display:block}
.prod-arte .taza{height:175px;width:auto;display:block}
.prod-arte .flujo{align-self:center;display:flex;flex-direction:column;gap:.45rem;width:80%}
.prod-arte .flujo span{background:var(--papel);border:1px solid #DCDDF4;border-radius:10px;padding:.45rem .7rem;
                       font-size:.8rem;font-weight:600;color:var(--prod-hondo)}
.prod-dice{padding:1.2rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.prod-dice .estado{align-self:flex-start}
.prod-dice h3{font-size:1.35rem;letter-spacing:-.02em}
.prod-dice .para-quien{margin:0}
.prod-dice p{color:var(--tinta-suave);font-size:.95rem}
.prod-dice .enlace-producto{margin-top:auto;padding-top:.6rem;color:var(--prod-hondo)}

/* ---------- StartToFlow: el chat como protagonista ---------- */
.hero-arte-stf{position:relative}
.telefono{width:300px;margin-left:auto;background:var(--tinta);border-radius:38px;padding:12px;
          box-shadow:0 30px 60px -24px rgba(61,122,36,.55)}
.telefono .pantalla{background:#EFEAE2;border-radius:28px;overflow:hidden}
.telefono .cab{background:#F0F2F5;padding:.8rem 1rem;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.6rem;
               border-bottom:1px solid var(--linea)}
.telefono .cab i{width:30px;height:30px;border-radius:50%;background:#6CC14A}
.telefono .chat{margin:0;border-radius:0;max-width:none;box-shadow:none;border:0;padding:1rem .8rem 1.4rem}
.hero-arte-stf .taza{position:absolute;left:-30px;bottom:-30px;width:150px;height:auto}

/* ---------- ProFlow: el recorrido de una cita ----------
   Sin producto que capturar, se enseña el recorrido, y se rotula como
   ilustración: una pantalla inventada prometería funciones que quizá no existen. */
.recorrido{display:flex;flex-direction:column;gap:.7rem;background:var(--prod-tenue);border:1px solid #DCDDF4;
           border-radius:20px;padding:1.6rem}
.recorrido > div{display:flex;gap:.9rem;align-items:flex-start;background:var(--papel);border-radius:14px;
                 padding:.85rem 1rem;border:1px solid #E4E5F7}
.recorrido b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--prod);color:#fff;font-size:.85rem;
             display:grid;place-items:center}
.recorrido > div > span{font-size:.93rem;color:var(--tinta-suave)}
.recorrido strong{display:block;color:var(--tinta);font-size:.98rem}
.recorrido small{font-size:.78rem;color:var(--gris);text-align:center}
.quien3{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.quien3 li{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:1.3rem;
           color:var(--tinta-suave);font-size:.97rem}

/* ---------- DeskFlow: los pasos y los planes ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.paso{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.paso img{display:block;width:100%;height:auto;aspect-ratio:964/796;object-fit:cover;object-position:top left;
          border-bottom:1px solid var(--linea)}
.paso > div{padding:1rem 1.1rem 1.2rem}
.paso em{font-style:normal;font-weight:800;color:var(--prod-hondo);font-size:.8rem;letter-spacing:.12em}
.paso h3{font-size:1.02rem;margin-top:.3rem}
.paso p{color:var(--tinta-suave);font-size:.92rem;margin-top:.35rem}
.planes3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem;max-width:900px}
.planes3 .plan{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:1.5rem}
.planes3 .plan.dest{border:2px solid var(--prod)}
.planes3 h3{font-size:1rem;color:var(--tinta-suave)}
.planes3 .cifra{font-size:1.9rem;font-weight:850;letter-spacing:-.03em;margin-top:.3rem;color:var(--tinta)}
.planes3 .cifra small{font-size:.9rem;font-weight:600;color:var(--gris)}
.planes3 p{color:var(--tinta-suave);font-size:.9rem;margin-top:.3rem}
.planes3 .regalo{display:inline-block;margin-top:.6rem;background:var(--prod-tenue);color:var(--prod-hondo);
                 font-weight:700;font-size:.78rem;padding:.25rem .6rem;border-radius:999px}

/* ---------- el cierre: una tarjeta en el color del producto ----------
   En la portada, sin producto, va en tinta. */
.seccion-remate{padding:16px 0 96px}
.remate{display:flex;align-items:center;justify-content:space-between;gap:2rem;
        background:var(--prod-hondo,var(--tinta));color:#fff;border-radius:22px;padding:2.4rem 2.6rem}
.remate h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;color:#fff}
.remate p{opacity:.88;margin-top:.5rem;font-size:1.05rem;max-width:52ch}
.remate .btn{flex:none}

@media (max-width:900px){
  .dos{grid-template-columns:1fr;gap:1.6rem}
  .tres,.quien3,.planes3{grid-template-columns:1fr}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .escena{height:340px}.escena .mini{width:150px;right:0}
  .telefono{margin:0 auto}
}
@media (max-width:640px){
  .pasos,.dos .modulos,.dos .dos-caminos{grid-template-columns:1fr}
  .remate{flex-direction:column;align-items:flex-start;padding:2rem 1.5rem}
  .remate .btn{width:100%}
  .hero-acciones .btn{flex:1 1 100%}
  .hero-arte-stf .taza{display:none}
  .escena{height:270px}.escena .persona{width:120%}.escena .mini{display:none}
  .chip{font-size:.72rem;padding:.4rem .6rem}
}