/* ═══════════════════════════════════════════════════════════
   ARQUETIPOS DE PORTADA
   No son cinco pinturas del mismo esqueleto: cambian qué
   aparece primero, cuántas columnas hay y de qué tamaño es
   cada cosa. Se activan con data-arq en la <section>.
   ═══════════════════════════════════════════════════════════ */

/* ─── común a todos ─── */
.portada[data-arq]{padding:0;overflow:hidden}
.portada[data-arq] .env{padding-top:78px;padding-bottom:78px}
.portada[data-arq] .marca-app{
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
}
.portada[data-arq] .marca-app img{width:52px;height:52px;border-radius:13px;flex:none}
.portada[data-arq] .marca-app .nom{
  font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:#fff;
}
.portada[data-arq] .marca-app .cat{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:block;margin-top:3px;
}
.portada[data-arq] .acciones{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.portada[data-arq] .plat-linea{
  font-family:var(--mono);font-size:.76rem;color:rgba(255,255,255,.55);
  letter-spacing:.06em;margin-top:22px;
}


/* ═══ A · ESCAPARATE ══════════════════════════════════════
   Abre con una captura real de la app, grande, a la derecha.
   El producto se ve antes de que nadie lea nada.
   Table Ready AI · Mundara · NookFin
   ═══════════════════════════════════════════════════════ */

.portada[data-arq="escaparate"] .env{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:64px;align-items:center;padding-bottom:0;
}
.portada[data-arq="escaparate"] h1{
  font-size:clamp(2.4rem,4.6vw,3.6rem);max-width:14ch;margin-bottom:20px;
}
.portada[data-arq="escaparate"] .frase{
  font-size:1.2rem;color:rgba(255,255,255,.82);max-width:44ch;line-height:1.6;
}
.portada[data-arq="escaparate"] .escena{
  min-width:0;max-width:100%;
  position:relative;justify-self:center;align-self:end;
  margin-bottom:-40px;
}
.portada[data-arq="escaparate"] .escena img{
  width:284px;border-radius:34px;border:6px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
@media (max-width:1040px){
  .portada[data-arq="escaparate"] .env{grid-template-columns:minmax(0,1fr) 240px;gap:36px}
  .portada[data-arq="escaparate"] .escena img{width:232px}
}
@media (max-width:900px){
  .portada[data-arq="escaparate"] .env{grid-template-columns:1fr;gap:36px}
  .portada[data-arq="escaparate"] .escena{
  min-width:0;max-width:100%;justify-self:start;margin-bottom:-30px}
  .portada[data-arq="escaparate"] .escena img{width:216px;border-radius:26px}
}


/* ═══ B · DATO ════════════════════════════════════════════
   Abre con la cifra que define la app, a tamaño de cartel.
   El nombre va chico. Para lo que se vende por su alcance.
   InverRent · AdminLook · OrdenPlace
   ═══════════════════════════════════════════════════════ */

.portada[data-arq="dato"] .cifrota{
  display:block;line-height:.86;letter-spacing:-.05em;
  font-family:var(--display);font-weight:700;
  font-size:clamp(5rem,17vw,13rem);
  background:linear-gradient(170deg,#fff 30%,color-mix(in srgb,var(--acento2) 80%,#fff));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:8px 0 0;
}
.portada[data-arq="dato"] .cifrota-pie{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.6);display:block;margin-top:14px;
}
.portada[data-arq="dato"] .frase{
  font-size:clamp(1.3rem,2.5vw,1.9rem);color:#fff;max-width:26ch;
  margin-top:46px;line-height:1.32;font-family:var(--display);font-weight:400;
}
.portada[data-arq="dato"] .abajo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:26px;margin-top:52px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.2);
}
.portada[data-arq="dato"] .abajo dd{
  margin:0;font-family:var(--display);font-size:1.7rem;font-weight:600;color:#fff;letter-spacing:-.03em;
}
.portada[data-arq="dato"] .abajo dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:5px;
}


/* ═══ C · PREGUNTA ════════════════════════════════════════
   Abre con la frase, enorme, ocupando todo el ancho.
   Sin ícono grande, sin columnas. La tipografía es el diseño.
   La Jugada · AcademyLook
   ═══════════════════════════════════════════════════════ */

.portada[data-arq="pregunta"] .env{padding-top:96px;padding-bottom:88px}
.portada[data-arq="pregunta"] .frasota{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.6rem,8.2vw,6.4rem);line-height:.92;letter-spacing:-.035em;
  color:#fff;max-width:15ch;margin:0;
}
.portada[data-arq="pregunta"] .frasota b{
  color:var(--acento2);font-weight:800;
}
.portada[data-arq="pregunta"] .frase{
  font-size:1.16rem;color:rgba(255,255,255,.76);max-width:52ch;margin-top:30px;
}
.portada[data-arq="pregunta"] .tiras{
  display:flex;gap:36px;flex-wrap:wrap;margin-top:44px;
  padding-top:24px;border-top:2px solid var(--acento);
}
.portada[data-arq="pregunta"] .tiras span{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.portada[data-arq="pregunta"] .tiras b{color:#fff;font-weight:600}


/* ═══ D · RESULTADO ═══════════════════════════════════════
   No enseña la app: enseña lo que la app produce, centrado
   y como si estuviera sobre una mesa.
   Recibo Estudio · TicketMake
   ═══════════════════════════════════════════════════════ */

.portada[data-arq="resultado"] .env{text-align:center;padding-bottom:0}
.portada[data-arq="resultado"] .marca-app{justify-content:center}
.portada[data-arq="resultado"] h1{
  font-size:clamp(2.2rem,4.6vw,3.4rem);margin:0 auto 18px;max-width:18ch;
}
.portada[data-arq="resultado"] .frase{
  font-size:1.14rem;color:rgba(255,255,255,.8);max-width:48ch;margin:0 auto;
}
.portada[data-arq="resultado"] .acciones{justify-content:center}
.portada[data-arq="resultado"] .mesa{
  margin-top:52px;display:flex;justify-content:center;align-items:flex-end;
  gap:22px;padding-bottom:0;
}
.portada[data-arq="resultado"] .mesa img{
  width:200px;border-radius:22px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.8);
  transform-origin:bottom center;
}
.portada[data-arq="resultado"] .mesa img:nth-child(1){transform:rotate(-7deg) translateY(18px);opacity:.82}
.portada[data-arq="resultado"] .mesa img:nth-child(2){width:238px;z-index:2}
.portada[data-arq="resultado"] .mesa img:nth-child(3){transform:rotate(7deg) translateY(18px);opacity:.82}
@media (max-width:720px){
  .portada[data-arq="resultado"] .mesa img:nth-child(1),
  .portada[data-arq="resultado"] .mesa img:nth-child(3){display:none}
  .portada[data-arq="resultado"] .mesa img:nth-child(2){width:210px}
}


/* ═══ E · EXPEDIENTE ══════════════════════════════════════
   Dos columnas como una portada de reporte: a la izquierda
   el título, a la derecha una ficha con los datos duros.
   InvoPlace · Textil Manager · SellOS
   ═══════════════════════════════════════════════════════ */

.portada[data-arq="expediente"] .env{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:64px;align-items:start;
}
.portada[data-arq="expediente"] h1{
  font-size:clamp(2.4rem,5vw,4rem);max-width:12ch;margin-bottom:22px;
}
.portada[data-arq="expediente"] .frase{
  font-size:1.16rem;color:rgba(255,255,255,.8);max-width:46ch;
}
.portada[data-arq="expediente"] .ficha{
  border:1px solid rgba(255,255,255,.22);padding:4px 26px;margin-top:8px;
  background:rgba(255,255,255,.04);
}
.portada[data-arq="expediente"] .ficha .par{
  padding:17px 0;border-top:1px solid rgba(255,255,255,.14);
}
.portada[data-arq="expediente"] .ficha .par:first-child{border-top:0}
.portada[data-arq="expediente"] .ficha dt{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.portada[data-arq="expediente"] .ficha dd{
  margin:6px 0 0;color:#fff;font-size:1.02rem;
}
@media (max-width:900px){
  .portada[data-arq="expediente"] .env{grid-template-columns:1fr;gap:38px}
}


/* ═══════════════════════════════════════════════════════════
   MENÚ EN TABLETA
   Con cinco idiomas el menú no cabe entre 720 y 900 px, así
   que ahí también se colapsa en el botón. Antes solo colapsaba
   por debajo de 720 y se salía de la pantalla.
   ═══════════════════════════════════════════════════════════ */

@media (min-width:721px) and (max-width:900px){
  .menu{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanco);border-bottom:1px solid var(--regla);
    padding:8px 24px 16px;box-shadow:var(--sombra);z-index:70;
  }
  .menu.abierto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--regla-tenue);font-size:1rem}
  .menu .btn{margin-top:12px;justify-content:center;border-bottom:0}
  .menu .idioma,.menu .idiomas{margin-top:12px;align-self:flex-start;flex-wrap:wrap}
  .hamb{display:block}
  [data-tema="cancha"] .menu{background:var(--papel2);border-color:var(--regla)}
}