/* ============================================================================
   Inés Lapegüe — LA BOTONERA DE LA PLATAFORMA EN LA PORTADA (10-nov-2026)
   La portada monta el portal de la app (lapegue-app) debajo del mapa. Se cargan estilo.css, después las hojas de la
   plataforma (/portal/css) y al final ésta, que arregla lo que se pisan entre sí —las reglas por etiqueta de cada una
   y las clases que se llaman igual (.btn, .specs, .marca, .tilde, .chip)— y acomoda la botonera a esta web: su sección
   y las tarjetas de resultados con la foto arriba, como las de la web. La botonera en sí queda como en la plataforma
   (el cliente: «botones rojos grandes… en cuanto a colores, tamaño, todo»).
   ========================================================================== */

/* ---------- la sección ---------- */
.portal-web { padding: clamp(32px, 5vw, 72px) 0 clamp(8px, 2vw, 24px); }
.portal-web #app { padding: 0 var(--marg); }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* la plataforma vuelve a su lugar al cerrar la ficha: sin la animación del desplazamiento de la web de por medio
   (el menú de la web viaja igual: lo hace con su propio scrollTo suave) */
html { scroll-behavior: auto; }

/* ---------- lo que la web les pone a todas las etiquetas, dentro de la plataforma ---------- */
/* íconos e imágenes en línea, como en la app (la web los pasa a bloque) */
:where(#app, #v-registro, .pt-sheet, .match-pop, .pt-asis, .pt-aviso-corto) svg,
:where(#app, #v-registro, .pt-sheet, .match-pop, .pt-asis, .pt-aviso-corto) img { display: revert; max-width: revert; height: revert; }
/* los títulos de la plataforma con su letra, no con la de los títulos grandes de la web */
:where(#app, #v-registro, .pt-sheet, .match-pop) :is(h1, h2, h3) { font: revert; letter-spacing: revert; line-height: revert; text-wrap: revert; }

/* ---------- clases que se llaman igual en las dos ---------- */
/* la cabecera, el menú del teléfono y la tarjeta del mapa: sus botones son los de la web */
.cab .btn, .menu-movil .btn, .llamada .btn {
  flex: none; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 .9375rem/1.1 var(--f-texto); letter-spacing: .005em; white-space: nowrap;
}
.cab-wa { min-height: 46px; padding: 10px 20px; }
@media (max-width: 1080px) { .cab .cab-wa { display: none; } }   /* en el teléfono va en el menú (la .btn de la plataforma la mostraba) */
.cab .btn-rojo, .menu-movil .btn-rojo { background: var(--rojo-campo); color: #fff; box-shadow: 0 10px 22px -12px rgba(217, 27, 46, .75); }
.cab .btn-rojo:hover, .menu-movil .btn-rojo:hover { background: var(--rojo-hover); }
.llamada .btn-tinta { background: var(--tinta); color: #fff; box-shadow: none; }
.llamada .specs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; grid-template-columns: none; }
@media (max-width: 999px) { .llamada .specs { display: none; } }   /* en el teléfono la tarjeta del mapa es una franja: sin datos */
.pie a { text-decoration: underline; }
/* el logo del ingreso no es un punto del mapa (.marca) ni el tilde de «¡Consulta enviada!» es una casilla (.tilde) */
#v-registro .marca { position: static; width: auto; height: auto; margin: 0 0 24px; cursor: auto; place-items: normal; }
.gracias .tilde { display: grid; place-items: center; padding: 0; border-bottom: 0; cursor: auto; }
.ofrecido .chip { min-height: 0; border: 0; gap: 0; line-height: 1.4; white-space: normal; cursor: auto; }

/* ---------- los resultados: tarjetas con la foto arriba, como las de la web ---------- */
.portal-web .pt-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(14px, 2vw, 22px);
}
.portal-web .pt-card {
  flex-direction: column; background: var(--blanco); border: 1px solid transparent; border-radius: var(--r-grande);
  box-shadow: var(--sombra-1); overflow: hidden;
}
.portal-web .pt-card.casi, .portal-web .pt-card.oculta { border: 1px dashed var(--linea-2); }
.portal-web .pt-foto { flex: none; width: 100%; aspect-ratio: 4 / 3; min-height: 0; align-self: auto; border-radius: 0; }
.portal-web .pt-cuerpo { padding: 14px 18px 18px; justify-content: flex-start; gap: 3px; }
.portal-web .pt-fav, .portal-web .pt-ubicar { right: 10px; background: rgba(255, 255, 255, .94); box-shadow: var(--sombra-1); }
.portal-web .pt-fav { top: 10px; }
.portal-web .pt-ubicar { top: 60px; }