/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 */
/* ==========================================================================
   /flex — la guia del vecino (rediseño 6-sep-2026)

   Minimalista e intuitiva: es lo primero que ve quien escanea el QR. Una
   columna de 640 px, papel liso con un aliento de color en las esquinas (sin
   ondas ni animación), tipografía grande, tarjetas con filo fino y casi sin
   sombra, y UN botón ámbar que siempre dice lo mismo: «Crear mi cuenta».

   Los colores salen de bioway-tokens.css; los tres que la app tiene y la web
   no (texto suave y bordes) se declaran aquí con los valores de colores.dart.
   Pensado para un teléfono de gama baja en la calle: nada depende de que el
   mapa cargue.

   7-sep-2026 (Raúl: «aplicar elementos visuales de estos [el login nuevo de
   la plataforma] en la pestaña de flex»): la tipografía pasa a la del resto
   del sitio —Inter en el cuerpo (--cuerpo), Montserrat 800 en los titulares
   (--display)— en vez de todo Montserrat como la app, y el hero lleva las dos
   cenefas onduladas de la portada. Cabeza.php ya carga Inter 400-700 y
   Montserrat 700-900 para todo el sitio, así que el @import de Montserrat
   500/600/700 que había aquí sobra: una petición menos.
   ========================================================================== */

:root{
  --texto-suave:#4E7561; --borde:#DCEEE1; --borde-suave:#E4F1E7;
  --r:18px; --sombra:0 1px 2px rgba(13,69,44,.06);
  --ambar-hondo:#7a5200;
}

.flex-pagina, .flex-pagina input, .flex-pagina button{font-family:var(--cuerpo)}
.flex-pagina h1,.flex-pagina h2,.flex-pagina h3{font-family:var(--display)}
.flex-pagina{color:var(--texto);position:relative;isolation:isolate;line-height:1.5}
.flex-ancho{width:min(640px,92vw);margin-inline:auto}

/* El fondo: papel y dos aguadas quietas, apenas visibles. */
.flex-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60vw 60vw at 100% 0%, rgba(127,228,220,.16), transparent 62%),
  radial-gradient(56vw 56vw at 0% 100%, rgba(201,245,180,.22), transparent 62%),
  var(--papel)}

/* ── Texto ─────────────────────────────────────────────────────────────── */
.flex-rotulo{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--medio);margin-bottom:12px}
.flex-hero h1{font-weight:800;color:var(--tinta);font-size:clamp(1.8rem,6.2vw,2.5rem);line-height:1.15;letter-spacing:-.015em;margin-bottom:22px}
.flex-seccion h2{font-weight:800;color:var(--tinta);font-size:clamp(1.35rem,4.6vw,1.7rem);line-height:1.2;letter-spacing:-.01em;margin-bottom:10px}
.flex-seccion h3{font-weight:700;color:var(--tinta);font-size:1.08rem;margin-bottom:8px}
.flex-lede{font-size:clamp(1rem,3vw,1.06rem);font-weight:500;margin-bottom:20px}
.flex-lede strong,.flex-pie strong,.flex-pie b{color:var(--tinta)}
.flex-pie{font-size:.9rem;color:var(--texto-suave);font-weight:500;margin-top:16px}
.flex-pie em{font-style:normal;font-weight:700;color:var(--texto)}
.flex-ayuda{font-size:.85rem;color:var(--texto-suave);margin:-4px 0 14px;font-weight:500}
.flex-nota{font-size:.88rem;color:var(--texto-suave);font-weight:600;margin-top:12px}
.flex-sub{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin:26px 0 10px}
.flex-pagina a:not(.flex-btn){color:var(--medio);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ── Secciones ─────────────────────────────────────────────────────────── */
/* El hero es el escenario de las cenefas (position:absolute dentro de él), y
   su contenido va por encima de ellas. Las cintas sobresalen por abajo hacia
   la primera sección: se recortan al hero. */
.flex-hero{padding:clamp(20px,5vw,40px) 0 clamp(26px,6vw,44px);position:relative;overflow:hidden}
.flex-hero .flex-ancho{position:relative;z-index:1}
/* La barra del sitio flota sobre el header: sitio para no quedar debajo. */
.flex-hero{padding-top:calc(98px + 24px)}
@media (max-width:1040px){.flex-hero{padding-top:calc(84px + 20px)}}
@media (max-width:760px){.flex-hero{padding-top:20px}}
.flex-seccion{padding:clamp(28px,6vw,48px) 0;border-top:1px solid var(--borde-suave);scroll-margin-top:112px}
@media (max-width:1040px){.flex-seccion{scroll-margin-top:98px}}
@media (max-width:760px){.flex-seccion{scroll-margin-top:16px}}

/* ── Botones ───────────────────────────────────────────────────────────── */
.flex-btn,.flex-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  background:var(--primary);color:#fff;font-weight:700;font-size:1rem;padding:0 22px;border-radius:14px;border:0;cursor:pointer;
  text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;
}
.flex-btn:hover{color:#fff;background:var(--primary-2);transform:translateY(-1px)}
.flex-btn:active{transform:translateY(0)}
.flex-btn:disabled{opacity:.55;cursor:default;transform:none}
.flex-btn:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.flex-btn-plano{background:#fff;color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--borde)}
.flex-btn-plano:hover{background:var(--menta-suave);color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--medio)}
/* El botón de empezar: el único acento cálido de la página, siempre el mismo. */
.flex-btn-fuerte{background:var(--amarillo);color:var(--tinta)}
.flex-btn-fuerte:hover{background:#FFD264;color:var(--tinta)}
.flex-btn-wa{background:#1FA855;margin-top:14px}
.flex-btn-wa:hover{background:#178A45}
/* Copiar el código: secundario frente al de WhatsApp, que es la acción que se
   quiere. Mismo tamaño para que no parezca un enlace perdido. */
.flex-btn-copiar{background:#fff;color:#0F5132;border:1.5px solid #0F5132;margin-top:10px}
.flex-btn-copiar:hover{background:#F1F8F3}
.flex-botones{display:flex;flex-wrap:wrap;gap:10px}
.flex-botones .flex-btn{flex:1 1 220px}

/* ── El hero: mascotas + tres pasos ───────────────────────────────────── */
.flex-trio{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:0 auto 18px;max-width:420px}
.flex-trio img{display:block;height:auto;width:auto;max-height:150px;filter:drop-shadow(0 10px 16px rgba(13,69,44,.16))}
.flex-trio img:nth-child(1){max-height:122px;margin-right:-4%}
.flex-trio img:nth-child(3){max-height:132px;margin-left:-4%}
.flex-pasos{list-style:none;counter-reset:paso;display:grid;gap:8px;margin-bottom:22px}
.flex-pasos li{
  counter-increment:paso;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;
  background:#fff;border:1px solid var(--borde-suave);border-radius:var(--r);padding:12px 14px;box-shadow:var(--sombra);
}
.flex-pasos li::before{
  content:counter(paso);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-weight:700;font-size:.95rem;
}
.flex-pasos b{color:var(--tinta);font-weight:700}
.flex-pasos span{font-weight:500}
.flex-pasos li>b,.flex-pasos li>span{display:inline}
.flex-pasos li b::after{content:" "}
.flex-pasos li{grid-template-columns:34px 1fr;grid-auto-flow:column}
.flex-pasos li b,.flex-pasos li span{grid-column:2}
.flex-pasos li b{grid-row:1;font-size:1rem}
.flex-pasos li span{grid-row:2;font-size:.92rem;color:var(--texto)}
.flex-pasos li::before{grid-row:1/3;grid-column:1}

/* ── Qué entra: las tres familias de la app ────────────────────────────── */
.flex-familias{list-style:none;display:grid;gap:10px}
.flex-familias li{
  display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--borde-suave);border-radius:var(--r);padding:12px 16px 12px 12px;box-shadow:var(--sombra);
  position:relative;
}
.flex-familias img{width:76px;height:76px;object-fit:contain;display:block}
.flex-familias b{display:block;color:var(--tinta);font-size:1.05rem;font-weight:700}
.flex-familias span{display:block;font-size:.92rem;font-weight:500}
.flex-familias li::after{
  content:"";position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;
  background:var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4F30' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.flex-noentra{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.flex-noentra li{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--borde-suave);border-radius:999px;
  padding:6px 14px 6px 6px;font-size:.88rem;font-weight:600;color:var(--texto);
}
.flex-noentra img{width:30px;height:30px;object-fit:contain;filter:grayscale(.35);opacity:.85}
.flex-noentra li::after{content:"✕";color:var(--ambar-hondo);font-weight:700;font-size:.8rem}

/* El probador, plegado: quien quiere el detalle lo abre. */
.flex-probador-caja{margin-top:18px;border:1px solid var(--borde-suave);border-radius:var(--r);background:#fff;box-shadow:var(--sombra)}
.flex-probador-caja summary{cursor:pointer;list-style:none;padding:14px 46px 14px 16px;font-weight:700;color:var(--tinta);font-size:.96rem;position:relative}
.flex-probador-caja summary::-webkit-details-marker{display:none}
.flex-probador-caja summary::after,.flex-faq summary::after{
  content:"";position:absolute;right:14px;top:50%;width:24px;height:24px;transform:translateY(-50%);border-radius:50%;
  background:var(--menta-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4F30' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .2s;
}
.flex-probador-caja[open] summary::after,.flex-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.flex-probador{display:flex;flex-wrap:wrap;gap:8px;padding:2px 14px 14px}
.flex-probador button{
  font:inherit;font-size:.86rem;font-weight:600;color:var(--tinta);cursor:pointer;
  background:var(--papel);border:1px solid var(--borde);border-radius:999px;padding:8px 14px;line-height:1.2;
  transition:background .15s,border-color .15s;
}
.flex-probador button:hover{border-color:var(--medio)}
.flex-probador button.es-si{background:var(--menta);border-color:var(--medio)}
.flex-probador button.es-no{background:rgba(245,192,67,.35);border-color:var(--amarillo)}
.flex-veredicto{margin:0 14px 14px;padding:12px 14px 12px 16px;border-radius:12px;background:var(--menta-suave);border-left:4px solid var(--medio)}
.flex-veredicto.es-no{background:rgba(245,192,67,.18);border-left-color:var(--amarillo)}
.flex-veredicto b{display:block;color:var(--tinta);margin-bottom:2px;font-size:.98rem}
.flex-veredicto p{font-size:.92rem;font-weight:500}

/* ── Qué ganas ─────────────────────────────────────────────────────────── */
.flex-ganas{list-style:none;display:grid;gap:0;border:1px solid var(--borde-suave);border-radius:var(--r);background:#fff;box-shadow:var(--sombra);overflow:hidden}
.flex-ganas li{display:grid;grid-template-columns:minmax(0,130px) 1fr;gap:12px;padding:13px 16px;border-top:1px solid var(--borde-suave);font-size:.95rem;font-weight:500;align-items:baseline}
.flex-ganas li:first-child{border-top:0}
.flex-ganas b{color:var(--tinta);font-weight:700}
@media (max-width:420px){.flex-ganas li{grid-template-columns:1fr;gap:2px}}

/* ── Puntos ────────────────────────────────────────────────────────────── */
.flex-cerca{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px}
.flex-cerca .flex-ayuda{margin:0;flex:1 1 200px}
.flex-btn-cerca{min-height:44px}
.flex-lista{display:grid;gap:8px;margin-bottom:14px}
.flex-punto{background:#fff;border:1px solid var(--borde-suave);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sombra)}
.flex-punto.es-piloto{border-color:var(--medio)}
.flex-punto.es-cercano{order:-1;box-shadow:0 0 0 2px var(--menta)}
.flex-punto h3{font-size:1rem;line-height:1.25;margin-bottom:2px}
.flex-punto-tipo{font-size:.78rem;color:var(--medio);font-weight:700;margin-bottom:4px}
.flex-punto-dir,.flex-punto-hora{font-size:.88rem;color:var(--texto-suave);font-weight:500}
.flex-punto-dist{display:block;font-size:.84rem;font-weight:700;color:var(--medio);margin-bottom:4px}
.flex-punto-marcas{margin:8px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.flex-marca{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px}
.flex-marca-piloto{background:var(--menta);color:var(--primary)}
.flex-marca-duda{background:rgba(245,192,67,.35);color:var(--ambar-hondo)}
.flex-comollego{display:inline-block;margin-top:8px;font-size:.88rem}
.flex-mapa{height:280px;border-radius:var(--r);background:var(--papel-2);border:1px solid var(--borde-suave);overflow:hidden}
.flex-cargando{color:var(--texto-suave);font-weight:500}
/* La lista plegada: tres tarjetas y el botón; el orden lo decide `order`
   (el más cercano va al frente), así que se esconde por posición visual con
   nth-child sobre las tarjetas, no sobre el aviso ni el botón. */
.flex-lista.plegada .flex-punto:nth-of-type(n+4):not(.es-cercano){display:none}
.flex-lista-mas{order:99;justify-self:start;min-height:44px}

/* ── El alta ───────────────────────────────────────────────────────────── */
.flex-forma,.flex-listo{background:#fff;border:1px solid var(--borde-suave);border-radius:var(--r);box-shadow:var(--sombra);padding:clamp(18px,4vw,26px)}
.flex-forma label{display:block;font-weight:700;font-size:.9rem;color:var(--tinta);margin-bottom:6px}
.flex-forma input{
  width:100%;font-size:1.02rem;font-weight:500;padding:13px 14px;margin-bottom:14px;border-radius:12px;
  border:1.5px solid var(--borde);background:#fff;color:var(--tinta);transition:border-color .15s,box-shadow .15s;
}
.flex-forma input::placeholder{color:#8FAF9C}
.flex-forma input:focus{outline:0;border-color:var(--medio);box-shadow:0 0 0 4px rgba(45,130,89,.16)}
.flex-forma input:user-invalid{border-color:var(--amarillo)}
.flex-forma .flex-btn{width:100%;margin-top:4px}
.flex-clave{position:relative}
.flex-clave input{padding-right:70px}
.flex-ver{position:absolute;right:8px;top:7px;height:36px;padding:0 12px;border:0;border-radius:10px;cursor:pointer;background:var(--menta-suave);color:var(--primary);font-weight:700;font-size:.82rem}
.flex-ver[aria-pressed="true"]{background:var(--medio);color:#fff}
.flex-error{background:rgba(245,192,67,.3);color:var(--ambar-hondo);font-weight:600;padding:12px 14px;border-radius:12px;margin-top:12px;font-size:.92rem}
.flex-legal{margin-top:12px}
.flex-listo{border-color:var(--medio)}
.flex-codigo-rotulo{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--medio);margin:16px 0 4px}
.flex-codigo{font-weight:700;color:var(--tinta);font-size:clamp(2.2rem,11vw,3rem);letter-spacing:.16em;line-height:1.1;margin-bottom:6px}

/* ── WhatsApp ──────────────────────────────────────────────────────────── */
.flex-frases{list-style:none;display:grid;gap:8px}
.flex-frases li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.flex-frases b{font-size:.92rem;font-weight:700;color:var(--tinta);background:#fff;border:1px solid var(--borde);padding:7px 13px;border-radius:14px 14px 14px 4px}
.flex-frases span{font-size:.88rem;color:var(--texto-suave);font-weight:500}

/* ── Dudas ─────────────────────────────────────────────────────────────── */
.flex-faq{display:grid;gap:8px}
.flex-faq details{background:#fff;border:1px solid var(--borde-suave);border-radius:var(--r);box-shadow:var(--sombra)}
.flex-faq summary{cursor:pointer;list-style:none;padding:13px 46px 13px 16px;font-weight:700;color:var(--tinta);font-size:.95rem;position:relative}
.flex-faq summary::-webkit-details-marker{display:none}
.flex-faq details p{padding:0 16px 14px;font-size:.92rem;font-weight:500}
.flex-faq details b{color:var(--tinta)}

/* ── Cierre ────────────────────────────────────────────────────────────── */
.flex-cierre{padding-bottom:clamp(60px,10vw,80px)}
.flex-aliados{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:22px;font-size:.84rem;font-weight:500;color:var(--texto-suave)}
.flex-aliados img{height:22px;width:auto;display:block}
.flex-aliados b{color:var(--tinta)}

/* En el teléfono la barra del sitio ya va abajo (bioway-nav.css): no se
   añade otra. Lo que sí: el hero más corto, para que «Crear mi cuenta» quede
   a la vista sin bajar. */
@media (max-width:760px){
  .flex-trio{margin-bottom:12px}
  .flex-trio img{max-height:104px}
  .flex-trio img:nth-child(1){max-height:86px}
  .flex-trio img:nth-child(3){max-height:92px}
  .flex-hero h1{margin-bottom:14px}
  .flex-pasos{gap:6px;margin-bottom:14px}
  .flex-pasos li{padding:9px 12px}
  .flex-pasos li span{font-size:.88rem}
}

/* punto.php (el toque del tag NFC) comparte esta hoja: su hero es sólo un
   título, un párrafo y un botón, así que aquí van los tres. */
.flex-main{width:min(640px,92vw);margin-inline:auto}
.flex-main .flex-hero p{font-size:1.02rem;font-weight:500;margin-bottom:14px}
.flex-main .flex-cta{margin-top:4px}

/* Leaflet pinta sus controles con z-index alto; la barra del sitio va encima. */
.leaflet-pane,.leaflet-control{z-index:1 !important}