/* ============================================================
   Grupo GuerreroCar · portada pública
   Marino #051c2c. Tipografía Poppins (alojada en local).
   ============================================================ */
:root { --marino: #051c2c; --texto: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.45; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@font-face { font-family: "Poppins"; font-weight: 300; font-display: swap; src: url("fuentes/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("fuentes/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("fuentes/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("fuentes/poppins-latin-600-normal.woff2") format("woff2"); }
.pag-portada { background: var(--marino); color: #fff; font-family: "Poppins", var(--texto); }
.pag-portada :focus-visible { outline-color: #fff; }
.pag-portada a { color: inherit; text-decoration: none; }
.pag-portada a:hover { text-decoration: underline; text-underline-offset: .3em; }
.portada { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 2rem 1.25rem 1.5rem; }
.portada-bloque { align-self: center; width: min(52rem, 100%); container-type: inline-size; text-align: center; }
.portada-bloque h1 { margin: 0; line-height: 0; }
.portada-bloque img { display: block; width: 100%; height: auto; }
.portada-bloque p { margin: 0; }
/* Los tamaños van en proporción al ancho del logo (cqw) para que el lema lo ocupe entero */
.portada-grupo { margin-top: 4.2vw; margin-top: 4.2cqw; font-weight: 400; font-size: 2.1vw; font-size: 2.1cqw; letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; opacity: .85; }
.portada-bloque .portada-lema { margin-top: 2vw; margin-top: 2cqw; margin-right: -.42em; font-weight: 500; font-size: 2.05vw; font-size: 2.05cqw; letter-spacing: .42em; text-transform: uppercase; white-space: nowrap; text-align: justify; text-align-last: justify; }
.portada-bloque .portada-marcas { margin-top: 6.5vw; margin-top: 6.5cqw; }
.portada-bloque .portada-web { margin-top: 8.5vw; margin-top: 8.5cqw; font-weight: 300; font-size: max(.8rem, 1.85cqw); letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; }
.portada-bloque .portada-tel { margin-top: .5em; font-weight: 300; font-size: max(1rem, 2.5cqw); letter-spacing: .28em; margin-right: -.28em; }
.portada-bloque .portada-dir { margin-top: 1.1em; font-weight: 300; font-size: max(.8rem, 1.5cqw); letter-spacing: .06em; line-height: 1.5; }
.portada-pie { padding-top: 2rem; }
.portada-pie a { display: inline-block; padding: .6rem .9rem; font-size: .72rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.portada-pie a:hover, .portada-pie a:focus-visible { opacity: 1; }

@media (max-width: 640px) {
  .portada-grupo { font-size: .7rem; letter-spacing: .4em; margin-right: -.4em; }
  .portada-bloque .portada-lema { white-space: normal; text-align: center; text-align-last: center; font-size: .74rem; letter-spacing: .28em; margin-right: -.28em; line-height: 1.9; }
}