/* Estilos compartidos de la landing (index.html) y de la pagina Founder
   (founders.html). Rediseño 3 sep 2026 segun el doc "Landing Founders" de
   Alex: ritmo tipo Lovable —mucho aire, muy poco texto y el producto
   ocupando el protagonismo—. Una sola idea por seccion: titular corto,
   frase de apoyo y una captura real de la aplicacion que la demuestre.

   Mismos tokens que la app (tema claro). Toda la pagina va en Jakarta; la
   Bricolage queda solo en el logo, que es SVG. */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/jakarta-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/jakarta-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/jakarta-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/jakarta-extrabold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --crema: #FBF7F1;         /* --fondo */
  --tinta: #1B1A17;         /* --tinta */
  --verde: #14776A;         /* --marca */
  --verde-oscuro: #0E5A50;  /* --marca-2 */
  --menta: #4FC3AC;
  --menta-clara: #7FD8C6;
  --arena: #EDE4D8;         /* --borde */
  --arena-suave: #F6F1E9;   /* --superficie-2 */
  --texto-suave: #5F5A52;   /* --tinta-2 */
  --radio: 20px;
  --sombra-producto: 0 2px 6px rgba(60, 45, 30, 0.05), 0 30px 70px -20px rgba(60, 45, 30, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--crema); color: var(--tinta);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
img { max-width: 100%; display: block; }
a { color: var(--verde); }
em { font-style: normal; color: var(--verde); }

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.estrecho { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---- Moneda: dolares o euros, nunca los dos. USD por defecto. ---- */
html[data-moneda="usd"] .eur,
html[data-moneda="eur"] .usd { display: none; }
/* Periodo de pago (mensual con 50 % x 3 meses, o anual): los dos importes van
   en el HTML y se ocultan por CSS, como la moneda, para que no parpadee. */
html[data-periodo="mensual"] .solo-anual,
html[data-periodo="anual"] .solo-mensual { display: none; }

/* ---- Botones ---- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 600; font-size: 1rem; padding: 14px 28px; border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-primario { background: var(--verde); color: #fff; box-shadow: 0 6px 20px rgba(20, 119, 106, .28); }
.btn-primario:hover { background: var(--verde-oscuro); transform: translateY(-1px); }
.btn-secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: var(--crema); }
.btn-grande { padding: 18px 36px; font-size: 1.08rem; }

/* ---- Cabecera ---- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 241, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arena);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav img { height: 32px; width: auto; }
.nav-enlaces { display: flex; align-items: center; gap: 28px; }
.nav-enlaces a { text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .95rem; }
.nav-enlaces a:hover { color: var(--verde); }
.nav-enlaces .btn { padding: 10px 22px; font-size: .95rem; }
/* `.nav-enlaces a` pinta los enlaces en tinta y pisaba el blanco del boton. */
.nav-enlaces .btn-primario, .nav-enlaces .btn-primario:hover { color: #fff; }

.menu-boton {
  display: none; align-items: center; gap: 8px;
  background: transparent; border: 1.5px solid var(--arena); border-radius: 999px;
  padding: 8px 16px; font: inherit; font-weight: 600; font-size: .95rem; color: var(--tinta); cursor: pointer;
}
.menu-boton .barras { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
.menu-boton .barras::before, .menu-boton .barras::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
}
.menu-boton .barras::before { top: -5px; }
.menu-boton .barras::after { top: 5px; }
@media (max-width: 900px) {
  .menu-boton { display: inline-flex; }
  .nav-enlaces {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--crema); border-bottom: 1px solid var(--arena); padding: 12px 24px 20px;
  }
  .nav-enlaces.abierto { display: flex; }
  .nav-enlaces a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--arena); }
  .nav-enlaces .btn { margin-top: 14px; }
}

/* ---- Producto: toda captura de la app se enmarca igual ---- */
.producto {
  border-radius: var(--radio); overflow: hidden; background: #fff;
  border: 1px solid var(--arena); box-shadow: var(--sombra-producto);
  aspect-ratio: 16 / 10;
}
.producto img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ---- Hero ---- */
.hero { padding: 96px 0 0; text-align: center; }
.hero h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); max-width: 17ch; margin: 0 auto 22px; }
.hero .sub { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--texto-suave); max-width: 44ch; margin: 0 auto 36px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.hero-nota { font-size: .9rem; color: var(--texto-suave); }
.hero-producto {
  margin: 64px auto 0; max-width: 1040px;
  border-radius: var(--radio) var(--radio) 0 0; overflow: hidden; background: #fff;
  border: 1px solid var(--arena); border-bottom: 0;
  box-shadow: 0 -10px 70px rgba(20, 119, 106, .14);
  aspect-ratio: 16 / 9;
}
.hero-producto img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hero + .separador { border-top: 1px solid var(--arena); }

/* ---- Secciones ---- */
section { padding: 120px 0; }
@media (max-width: 720px) { section { padding: 80px 0; } }
.titulo-seccion { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.titulo-seccion h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 16px; }
.titulo-seccion p { color: var(--texto-suave); font-size: 1.15rem; }
.titulo-seccion .btn { margin-top: 28px; }

/* ---- Conoce Alexia: tres bloques grandes, uno detras de otro ---- */
.bloques { display: grid; gap: 96px; }
@media (max-width: 720px) { .bloques { gap: 64px; } }
.bloque { display: grid; grid-template-columns: 4fr 7fr; gap: 56px; align-items: center; }
.bloque:nth-child(even) { grid-template-columns: 7fr 4fr; }
.bloque:nth-child(even) .bloque-texto { order: 2; }
@media (max-width: 860px) {
  .bloque, .bloque:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .bloque:nth-child(even) .bloque-texto { order: 0; }
}
.bloque-texto .numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--verde); color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 20px;
}
.bloque-texto h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; }
.bloque-texto p { color: var(--texto-suave); font-size: 1.1rem; max-width: 36ch; }

/* ---- Cuéntaselo a Alexia: una frase de ejemplo y la línea de confianza ---- */
.bloque-texto .cita {
  color: var(--tinta); font-weight: 600; font-size: 1.08rem; line-height: 1.5;
  border-left: 3px solid var(--menta); padding-left: 14px; margin-bottom: 14px; max-width: 34ch;
}
.confianza {
  text-align: center; color: var(--texto-suave); font-size: 1.08rem; max-width: 58ch;
  margin: 72px auto 0; padding: 18px 24px; border: 1px solid var(--arena); border-radius: 999px; background: #fff;
}
.confianza strong { color: var(--tinta); font-weight: 700; }
@media (max-width: 720px) { .confianza { border-radius: 16px; margin-top: 48px; } }

/* ---- Asi es Alexia por dentro: pestañas y una unica captura grande ---- */
.pestanas {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin: 0 auto 32px; padding: 6px;
  background: var(--arena-suave); border: 1px solid var(--arena); border-radius: 999px;
  width: fit-content; max-width: 100%;
}
.pestanas button {
  font: inherit; font-weight: 600; font-size: .92rem; color: var(--texto-suave);
  background: transparent; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(60, 45, 30, .12); }
@media (max-width: 720px) {
  .pestanas { border-radius: 16px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; width: auto; }
}
.panel-pestana { display: none; }
.panel-pestana.activa { display: block; }
.panel-pestana p { text-align: center; color: var(--texto-suave); font-size: 1.1rem; max-width: 52ch; margin: 0 auto 32px; }
.panel-pestana .producto { max-width: 1040px; margin: 0 auto; }
.pestanas-cta { text-align: center; margin-top: 48px; }

/* ---- Founders: los primeros 50 negocios ---- */
.primeros { text-align: center; }
.primeros h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 24px; }
.primeros .texto { color: var(--texto-suave); font-size: 1.15rem; max-width: 56ch; margin: 0 auto; }
.primeros .texto p + p { margin-top: 16px; }
.primeros .texto strong { color: var(--tinta); font-weight: 600; }
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 960px; margin: 72px auto 0; text-align: left; }
@media (max-width: 860px) { .beneficios { grid-template-columns: 1fr; gap: 24px; } }
.beneficio { border-top: 2px solid var(--verde); padding-top: 20px; }
.beneficio h3 { font-size: 1.15rem; margin-bottom: 8px; }
.beneficio p { color: var(--texto-suave); font-size: 1rem; }

/* ---- Precio ---- */
.selector-moneda, .selector-periodo {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--arena-suave); border: 1px solid var(--arena); border-radius: 999px;
}
.selector-moneda button, .selector-periodo button {
  font: inherit; font-weight: 600; font-size: .85rem; color: var(--texto-suave);
  background: transparent; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.selector-moneda button[aria-pressed="true"], .selector-periodo button[aria-pressed="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(60, 45, 30, .12); }
.titulo-seccion .selector-moneda { margin-top: 24px; }
/* Periodo y moneda juntos bajo el titulo de precios; el periodo manda (va primero y mas grande). */
.selectores-precio { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.selectores-precio .selector-moneda { margin-top: 0; }
.selector-periodo button { font-size: .95rem; padding: 8px 18px; }
.selector-periodo .etiqueta {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--verde);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.oferta-periodo { margin: 14px auto 0; color: var(--texto-suave); font-size: 1rem; }
.plan-tarjeta .nota-precio.ahorro { color: var(--verde); font-weight: 600; }
/* En mensual, cada tarjeta ensena lo que ahorraria en anual y cambia de periodo al tocarlo. */
.enlace-periodo {
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--verde); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.enlace-periodo:hover { color: var(--tinta); }
.oferta-periodo strong { color: var(--verde); font-weight: 700; }
.chip-oferta {
  display: inline-block; font-size: .78rem; font-weight: 700; color: var(--verde);
  background: rgba(20, 119, 106, .1); padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}

.tarjeta-precio {
  max-width: 520px; margin: 0 auto; background: #fff;
  border: 2px solid var(--verde); border-radius: var(--radio); padding: 40px 40px 36px;
  box-shadow: 0 16px 50px rgba(20, 119, 106, .14);
}
@media (max-width: 520px) { .tarjeta-precio { padding: 30px 24px; } }
.tarjeta-precio .cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tarjeta-precio .plan { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--verde); }
.tarjeta-precio .cifra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tarjeta-precio .cifra .importe { font-size: 3.6rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.tarjeta-precio .cifra .periodo { color: var(--texto-suave); font-weight: 600; font-size: 1.1rem; }
.tarjeta-precio .habitual { color: var(--texto-suave); margin-top: 12px; }
.tarjeta-precio .habitual strong { color: var(--tinta); }
.tarjeta-precio .garantia { margin-top: 14px; font-weight: 600; font-size: .98rem; }
.tarjeta-precio .incluye { margin: 28px 0 30px; padding-top: 24px; border-top: 1px solid var(--arena); }
.tarjeta-precio .incluye h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); margin-bottom: 14px; }
.tarjeta-precio ul { list-style: none; display: grid; gap: 10px; }
.tarjeta-precio li { position: relative; padding-left: 30px; font-size: 1rem; }
.tarjeta-precio li::before {
  content: ''; position: absolute; left: 2px; top: .5em;
  width: 14px; height: 8px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg);
}
.tarjeta-precio .btn { width: 100%; }
.tarjeta-precio .letra-pequena { margin-top: 14px; text-align: center; font-size: .88rem; color: var(--texto-suave); }

/* Planes de la web publica (Basico y Pro) */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 800px; margin: 0 auto; align-items: stretch; }
@media (max-width: 760px) { .planes { grid-template-columns: 1fr; } }
.plan-tarjeta { background: #fff; border: 1px solid var(--arena); border-radius: var(--radio); padding: 36px 32px; display: flex; flex-direction: column; position: relative; }
.plan-tarjeta.destacado { border: 2px solid var(--verde); box-shadow: 0 16px 50px rgba(20, 119, 106, .14); }
.plan-tarjeta .popular {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--verde); color: #fff; font-size: .78rem; font-weight: 600; padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-tarjeta h3 { font-size: 1.3rem; margin-bottom: 4px; }
.plan-tarjeta .precio { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 12px 0 0; line-height: 1; }
.plan-tarjeta .precio .periodo { font-size: 1rem; color: var(--texto-suave); font-weight: 600; letter-spacing: 0; }
.plan-tarjeta .nota-precio { font-size: .88rem; color: var(--texto-suave); margin-top: 6px; }
.plan-tarjeta .para { color: var(--texto-suave); margin: 18px 0 22px; }
.plan-tarjeta ul { list-style: none; flex: 1; margin-bottom: 26px; display: grid; gap: 9px; align-content: start; }
.plan-tarjeta li { position: relative; padding-left: 28px; font-size: .97rem; }
.plan-tarjeta li::before {
  content: ''; position: absolute; left: 2px; top: .5em;
  width: 13px; height: 7px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde);
  transform: rotate(-45deg);
}
.plan-tarjeta .btn { width: 100%; }
.prueba-nota { text-align: center; color: var(--texto-suave); max-width: 56ch; margin: 36px auto 0; font-size: 1rem; }
.prueba-nota strong { color: var(--tinta); font-weight: 600; }

/* ---- FAQ ---- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--arena); }
.faq details:first-child { border-top: 1px solid var(--arena); }
.faq summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 1.08rem;
  padding: 22px 44px 22px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--texto-suave); font-size: 1.02rem; padding: 0 0 24px; max-width: 64ch; }

/* ---- CTA final ---- */
.cierre { background: var(--verde-oscuro); color: var(--crema); text-align: center; padding: 140px 0; }
@media (max-width: 720px) { .cierre { padding: 96px 0; } }
.cierre h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 18ch; margin: 0 auto 20px; }
.cierre .sub { color: rgba(251, 247, 241, .82); font-size: 1.2rem; max-width: 48ch; margin: 0 auto 40px; }
.cierre .sub strong { color: #fff; font-weight: 600; }
.cierre .btn-primario { background: var(--crema); color: var(--verde-oscuro); box-shadow: none; }
.cierre .btn-primario:hover { background: #fff; }
.cierre .btn-secundario { color: var(--crema); border-color: rgba(251, 247, 241, .55); }
.cierre .btn-secundario:hover { background: rgba(251, 247, 241, .12); color: #fff; }
.cierre .nota { margin-top: 20px; font-size: .92rem; color: rgba(251, 247, 241, .7); }

/* Aviso cuando se entra en founders sin el enlace de invitacion */
.sin-invitacion { display: none; max-width: 560px; margin: 32px auto 0; background: rgba(251, 247, 241, .1); border: 1px solid rgba(251, 247, 241, .25); border-radius: 12px; padding: 16px 20px; text-align: left; }
body[data-invitacion="no"] .sin-invitacion { display: block; }
.sin-invitacion p { font-size: .95rem; color: rgba(251, 247, 241, .85); }
.sin-invitacion a { color: #fff; }

/* ---- Pie ---- */
footer { padding: 44px 0; }
.pie { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pie img { height: 26px; width: auto; }
.pie nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pie a { text-decoration: none; color: var(--texto-suave); font-size: .9rem; }
.pie a:hover { color: var(--verde); }
.pie .legal { font-size: .85rem; color: var(--texto-suave); width: 100%; }

/* Una conversación, del móvil al negocio. */
.hero h1 { max-width: 920px; margin-inline: auto; }
.conversation-preview { max-width: 610px; margin: 40px auto 0; border: 1px solid var(--arena); border-radius: 26px; overflow: hidden; text-align: left; box-shadow: var(--sombra-producto); background: var(--arena-suave); }
.preview-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px; background: #174f45; color: white; }
.preview-header small { display: block; font-size: 12px; opacity: .8; }
.preview-avatar { border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; background: #ffffff20; font-size: 30px; }
.preview-label { margin-left: auto; font-size: 11px; border: 1px solid #ffffff60; padding: 3px 8px; border-radius: 20px; }
.preview-messages { display: flex; flex-direction: column; gap: 14px; padding: 24px; font-size: 14px; }
.preview-user { align-self: flex-end; background: #d9eee6; padding: 12px 16px; border-radius: 16px 4px 16px 16px; max-width: 88%; }
.preview-reply { background: white; padding: 16px; border-radius: 4px 16px 16px; max-width: 94%; }
.preview-reply p { margin-top: 8px; }
.price-example { background: #fff0e8; color: #913c24; border: 1px solid #efbca5; padding: 16px; margin-top: 12px; border-radius: 12px; }
.price-example > span { font-size: 10px; letter-spacing: .08em; font-weight: 800; }
.price-example > strong { display: block; font-size: 23px; margin: 4px 0 12px; }
.price-example > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 11px; }
.price-example b { display: block; font-size: 20px; }
.price-example > small { display: block; font-size: 10px; margin-top: 10px; }
.preview-composer { display: flex; justify-content: space-between; gap: 12px; background: white; padding: 16px 20px; color: var(--verde); }
.preview-composer span { font-size: 12px; color: var(--texto-suave); }
@media(max-width: 650px) { .hero.contenedor { padding-inline: 18px; } }
.mobile-promise { background: #174f45; color: white; margin-bottom: 70px; }
.mobile-promise .eyebrow { color: #95dcc9; font-size: 11px; letter-spacing: .15em; }
.mobile-promise h2 { margin: 16px 0 36px; }
.promise-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.promise-grid article { border-top: 1px solid #ffffff35; padding-top: 18px; }
.promise-grid article > span { color: #95dcc9; font-size: 13px; }
.promise-grid h3 { font-size: 21px; margin: 12px 0; }
.promise-grid p { font-size: 14px; color: #d8e9e3; }
@media(max-width: 650px) { .hero h1 { font-size: clamp(34px,9vw,52px); } .preview-messages { padding: 14px; } .preview-header { padding: 14px; } .preview-reply { max-width: 100%; } .promise-grid { grid-template-columns: 1fr; gap: 24px; } .conversation-preview { margin-top: 28px; border-radius: 18px; } }

/* =====================================================================
   Rediseño 16 sep 2026 (doc "copys de la landing" de Alex): hero con
   captura, información dispersa → Alexia → conectada, cuatro entradas
   alrededor del producto, la IA en dos columnas, el recorrido de una
   factura, dos franjas pequeñas y el cierre. Sin cards con texto largo.
   ===================================================================== */

.hero .sub strong { color: var(--tinta); font-weight: 600; }
.titulo-seccion p strong { color: var(--tinta); font-weight: 600; }
.titulo-seccion p + p { margin-top: 12px; }

/* Entrada al hacer scroll: nada exagerado, solo lo justo para que se
   note que la información entra en Alexia. Sin JS o con movimiento
   reducido, todo se ve desde el principio. */
[data-entra] { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
html.js [data-entra] { opacity: 0; transform: translateY(18px); }
html.js .entradas .izquierda[data-entra] { transform: translateX(-32px); }
html.js .entradas .derecha[data-entra] { transform: translateX(32px); }
html.js [data-entra].visible,
html.js .entradas .izquierda[data-entra].visible,
html.js .entradas .derecha[data-entra].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js [data-entra] { opacity: 1; transform: none; transition: none; } }

/* ---- 2. Información dispersa → Alexia → conectada ---- */
.convergencia { display: grid; grid-template-columns: 220px 160px 1fr; gap: 0; align-items: center; }
.fuentes { list-style: none; display: grid; gap: 10px; }
.fuentes li {
  position: relative; background: #fff; border: 1px solid var(--arena); border-radius: 12px;
  padding: 12px 16px; font-weight: 600; font-size: .98rem; box-shadow: 0 1px 3px rgba(60, 45, 30, .06);
}
.fuentes li::after {
  content: ''; position: absolute; right: -28px; top: 50%; width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--arena), var(--menta));
}
.nodo { display: flex; align-items: center; justify-content: center; position: relative; height: 100%; }
.nodo::before, .nodo::after {
  content: ''; position: absolute; top: 50%; height: 2px; width: 32px; background: var(--menta);
}
.nodo::before { left: 0; }
.nodo::after { right: 0; }
.nodo-alexia {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; border-radius: 50%; background: var(--verde); color: #fff;
  font-weight: 800; font-size: 1.05rem; box-shadow: 0 12px 34px rgba(20, 119, 106, .32);
}
.convergencia .conectado { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .convergencia { grid-template-columns: 1fr; gap: 20px; }
  .fuentes { grid-template-columns: repeat(2, 1fr); }
  .fuentes li::after { display: none; }
  .nodo { height: 110px; }
  .nodo::before, .nodo::after { width: 2px; height: 20px; left: 50%; right: auto; top: auto; }
  .nodo::before { top: 0; }
  .nodo::after { bottom: 0; }
}

/* ---- 3. Cuatro entradas alrededor del producto ---- */
.entradas {
  display: grid; grid-template-columns: 250px 1fr 250px; grid-template-rows: auto auto;
  gap: 24px 28px; align-items: center;
}
/* La captura ocupa las dos filas enteras: asi la tarjeta 4, mas alta, no se
   descuelga por debajo de la imagen. */
.entradas .centro { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: auto; align-self: stretch; min-height: 420px; }
.entradas .centro img { height: 100%; }
.entrada {
  position: relative; background: #fff; border: 1px solid var(--arena); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 10px 30px -14px rgba(60, 45, 30, .25);
}
/* Filas explicitas: con la colocacion automatica la tarjeta 3 caia en la
   fila 2 y la 4 en una tercera, por debajo de la captura. */
.entrada.izquierda { grid-column: 1; }
.entrada.derecha { grid-column: 3; }
.entradas .entrada:nth-child(1), .entradas .entrada:nth-child(4) { grid-row: 1; }
.entradas .entrada:nth-child(2), .entradas .entrada:nth-child(5) { grid-row: 2; }
.entrada::after {
  content: ''; position: absolute; top: 50%; width: 28px; height: 2px; background: var(--menta);
}
.entrada.izquierda::after { right: -28px; }
.entrada.derecha::after { left: -28px; }
.etiqueta-entrada { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); margin-bottom: 6px; }
.entrada strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.entrada p { color: var(--texto-suave); font-size: .95rem; }
.entrada .cita-entrada { color: var(--tinta); font-weight: 600; border-left: 3px solid var(--menta); padding-left: 10px; margin: 6px 0 8px; }
@media (max-width: 960px) {
  .entradas { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .entradas .centro { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; min-height: 0; }
  .entrada.izquierda, .entrada.derecha { grid-column: auto; grid-row: auto; }
  .entrada::after { display: none; }
}
@media (max-width: 560px) { .entradas { grid-template-columns: 1fr; } }

/* ---- 4. La IA ---- */
.preguntas-ejemplo { color: var(--tinta) !important; font-weight: 600; font-size: 1.25rem !important; line-height: 1.5; }
.ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 1040px; margin: 0 auto; }
.ia-col h3 { font-size: 1.05rem; color: var(--texto-suave); font-weight: 700; margin-bottom: 18px; text-align: center; }
.ia-grid .conversation-preview { margin: 0; max-width: none; }
.alertas { list-style: none; display: grid; gap: 14px; }
.alerta {
  background: #fff; border: 1px solid var(--arena); border-left: 4px solid #d98a4a; border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 1px 3px rgba(60, 45, 30, .06);
}
.alerta-tipo { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #913c24; background: #fff0e8; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.alerta strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.alerta p { color: var(--texto-suave); font-size: .95rem; }
.ia-cierre { text-align: center; font-size: 1.25rem; margin-top: 56px; }
.ia .pestanas-cta { margin-top: 20px; }
@media (max-width: 860px) { .ia-grid { grid-template-columns: 1fr; } }

/* ---- 5. Recorrido de una factura: tres pasos en fila, cada uno con su
   tarjeta real a tamaño legible (16 sep 2026: en tres columnas no se leia) ---- */
.recorrido { list-style: none; display: grid; gap: 40px; max-width: 1040px; margin: 0 auto; position: relative; }
.paso { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; position: relative; }
.paso .numero {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--verde); color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: 16px;
}
.paso h3 { font-size: 1.4rem; margin-bottom: 8px; }
.paso p { color: var(--texto-suave); font-size: 1.05rem; }
.paso + .paso::before {
  content: ''; position: absolute; left: 17px; top: -40px; height: 40px; width: 2px; background: var(--menta);
}
.producto.detalle { aspect-ratio: auto; }
.producto.detalle img { width: 100%; height: auto; object-fit: contain; }
#decisiones .confianza { margin-top: 56px; }
@media (max-width: 860px) {
  .paso { grid-template-columns: 1fr; gap: 16px; }
  .paso + .paso::before { top: -40px; }
}

/* ---- Visor: clic en una captura y se ve a pantalla completa ---- */
.producto, .hero-producto { cursor: zoom-in; }
.visor {
  position: fixed; inset: 0; z-index: 100; background: rgba(27, 26, 23, .92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.visor[hidden] { display: none; }
.visor figure { max-width: min(1600px, 96vw); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.visor img { max-width: 100%; max-height: 84vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #fff; }
.visor figcaption { color: rgba(251, 247, 241, .8); font-size: .95rem; text-align: center; max-width: 70ch; }
.visor-cerrar {
  position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(251, 247, 241, .12); color: #fff; border: 1px solid rgba(251, 247, 241, .3);
  font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.visor-cerrar:hover { background: rgba(251, 247, 241, .25); }
body.con-visor { overflow: hidden; }

/* ---- 7. Franja: tú decides ---- */
.franja-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; border-top: 1px solid var(--arena); border-bottom: 1px solid var(--arena); }
.franja-texto h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 14px; }
.franja-texto p { color: var(--texto-suave); font-size: 1.1rem; max-width: 40ch; }
.franja-texto p strong { color: var(--tinta); font-weight: 600; }
.decision { background: #fff; border: 1px solid var(--arena); border-radius: 18px; padding: 22px 24px; box-shadow: var(--sombra-producto); }
.decision-aviso { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; }
.decision-aviso .preview-avatar { background: var(--verde); color: #fff; width: 38px; height: 38px; font-size: 26px; flex: 0 0 auto; }
.opciones { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.opciones li { border: 1.5px solid var(--verde); color: var(--verde); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .95rem; }
@media (max-width: 860px) { .franja-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- 8. Para quién: tres cifras ---- */
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; position: relative; }
.cifra { background: #fff; border: 1px solid var(--arena); border-radius: 16px; padding: 22px 24px; text-align: center; }
.cifra > span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.cifra strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra.destacada { border-color: var(--verde); }
.cifra.destacada strong { color: var(--verde); }
.cifras-nota { grid-column: 1 / -1; text-align: center; font-size: .82rem; color: var(--texto-suave); }
@media (max-width: 560px) { .cifras { grid-template-columns: 1fr; } }

/* ---- 12. Cierre: el sub lleva una negrita ---- */
.cierre .sub strong { color: #fff; }

/* ---- Móvil (16 sep 2026): el 90 % entra por el teléfono ----
   Por debajo de 700 px las capturas son de la app en su disposición móvil
   (<picture>), altas y estrechas: los marcos se adaptan a esa forma. */
.producto picture, .hero-producto picture { display: contents; }
@media (max-width: 700px) {
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .hero .sub { font-size: 1.05rem; margin-bottom: 28px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-producto {
    margin-top: 40px; max-width: 360px; aspect-ratio: 430 / 900; max-height: 640px;
    border-radius: 28px 28px 0 0;
  }
  .hero-producto img { object-position: top center; }
  .producto.telefono { aspect-ratio: 430 / 720; max-width: 360px; margin-left: auto; margin-right: auto; }
  .producto.telefono img { object-position: top center; }
  .producto.detalle { max-height: 440px; overflow: hidden; }
  .producto.detalle img { object-fit: cover; object-position: top; }
  .titulo-seccion { margin-bottom: 40px; }
  .titulo-seccion h2 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .titulo-seccion p { font-size: 1.05rem; }
  .preguntas-ejemplo { font-size: 1.1rem !important; }
  .ia-cierre { font-size: 1.1rem; margin-top: 40px; }
  .recorrido { gap: 32px; }
  .paso h3 { font-size: 1.25rem; }
  .franja-grid { padding-top: 32px; padding-bottom: 32px; }
  .cifras { gap: 10px; }
  .cifra { padding: 16px; }
  .cifra strong { font-size: 1.5rem; }
  .cierre h2 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .cierre .hero-cta { flex-direction: column; align-items: stretch; }
  .visor { padding: 12px; }
  .visor img { max-height: 80vh; }
  .visor-cerrar { top: 10px; right: 10px; }
}