/*
Theme Name: Prestosa Landing
Theme URI: https://prestosa.com
Author: Prestosa Media Group
Author URI: https://prestosa.com
Description: Tema de bloques a medida para la landing de Prestosa Media Group, la casa creativa de Mick Díaz. Negro, blanco y rojo; tipografía Archivo (OFL) alojada en el propio servidor; sin cookies, sin analítica y sin llamadas a terceros.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.3.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prestosa-landing
*/

/* =========================================================================
   Prestosa Landing, hoja de estilos del tema.
   Paleta: negro #000000 (fondo), blanco #FFFFFF (texto), gris #A3A3A3 (texto
   secundario), rojo #E30613 (acento y bloque de contacto).
   Tipografía: Archivo variable (ejes wdth 62-125 y wght 100-900), cargada
   desde theme.json (assets/fonts/Archivo-VF.woff2). Los titulares usan la
   versión condensada mediante font-stretch: 75%, que actúa sobre el eje wdth.
   Retícula única: 12 columnas; títulos y etiquetas en 1-5, texto corrido en 7-12.
   Las clases pmg-* las ponen los bloques de las plantillas (templates/ y parts/).
   ========================================================================= */

:root {
  --pmg-fondo: #000000;
  --pmg-texto: #ffffff;
  --pmg-secundario: #a3a3a3;
  --pmg-acento: #e30613;
  --pmg-linea: rgba(255, 255, 255, 0.18);
  --pmg-ancho: 1312px;   /* ancho útil del contenido */
  --pmg-margen: 64px;    /* margen lateral en escritorio */
}

html {
  background: var(--pmg-fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--pmg-fondo);
  color: var(--pmg-texto);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.45;
}

a {
  color: var(--pmg-texto);
  text-decoration: none;
}
a:hover { color: var(--pmg-acento); }
a:focus-visible {
  outline: 3px solid var(--pmg-acento);
  outline-offset: 6px;
}

/* Titulares: Archivo condensada, negrita máxima, caja alta. */
.pmg-titular,
.pmg-h1,
.pmg-h2,
.pmg-marca,
.pmg-correo-grande {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-stretch: 75%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.9;
  margin: 0;
}

/* WordPress separa los hijos de cada grupo con un margen de bloque; en las secciones
   del tema el espaciado lo da el propio CSS, así que ese margen se anula. */
[class*="pmg-"].is-layout-flow > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Contenedor común */
.pmg-margen {
  max-width: calc(var(--pmg-ancho) + 2 * var(--pmg-margen));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pmg-margen);
  padding-right: var(--pmg-margen);
  box-sizing: border-box;
}

/* Barra superior */
.pmg-barra {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  padding-top: 40px;
}
.pmg-barra p { margin: 0; }
.pmg-marca { font-size: 24px; line-height: 1; }
.pmg-marca a { color: var(--pmg-acento); }
.pmg-marca a:hover { color: var(--pmg-texto); }
.pmg-marca .pmg-marca-resto { color: var(--pmg-texto); }
.pmg-enlace {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--pmg-acento);
}
.pmg-barra .pmg-enlace { font-size: 18px; font-weight: 500; }

/* Uno: quién */
.pmg-hero {
  padding-top: 180px;
  padding-bottom: 160px;
}
.pmg-h1 {
  font-size: clamp(64px, 16.1vw, 232px);
  color: var(--pmg-texto);
  margin-bottom: 80px;
}
.pmg-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 40px;
  align-items: start;
}
.pmg-intro .pmg-aparte {
  grid-column: 1 / span 5;
  margin: 0;
  padding-top: 6px; /* alinea la altura de x del enlace con la primera línea del texto de la derecha */
  font-size: 18px;
  line-height: 1.5;
  color: var(--pmg-secundario);
}
.pmg-intro .pmg-intro-texto {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.pmg-intro .pmg-parrafo {
  margin: 0;
  font-size: 28px;
  line-height: 1.32;
  max-width: 34ch;
}

/* Dos: las cuatro cosas, palabras solas, una por fila */
.pmg-areas { padding-bottom: 160px; }
.pmg-area {
  padding: 40px 0;
  border-top: 1px solid var(--pmg-linea);
}
.pmg-area:last-child { border-bottom: 1px solid var(--pmg-linea); }
.pmg-area .pmg-h2 {
  font-size: clamp(48px, 8.3vw, 120px);
  color: var(--pmg-texto);
}

/* Tres: contacto, bloque rojo a sangre */
.pmg-contacto {
  background: var(--pmg-acento);
  color: var(--pmg-fondo);
}
.pmg-contacto .pmg-margen {
  padding-top: 140px;
  padding-bottom: 140px;
}
.pmg-contacto p { margin: 0; }
.pmg-correo-grande {
  font-size: clamp(34px, 8.3vw, 120px);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1;
  word-break: break-all;
}
.pmg-contacto a { color: var(--pmg-fondo); }
.pmg-contacto a:hover { color: var(--pmg-texto); }
.pmg-contacto a:focus-visible { outline-color: var(--pmg-fondo); }

/* Cuatro: pie */
.pmg-pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 56px;
  padding-bottom: 56px;
  font-size: 16px;
  color: var(--pmg-secundario);
}
.pmg-pie p { margin: 0; }
.pmg-pie a { color: var(--pmg-secundario); }
.pmg-pie a:hover { color: var(--pmg-acento); }
.pmg-pie-enlaces a + a { margin-left: 32px; }

/* Páginas interiores (aviso legal) */
.pmg-pagina {
  padding-top: 120px;
  padding-bottom: 160px;
}
.pmg-pagina .pmg-h1 {
  font-size: clamp(48px, 8.3vw, 120px);
  margin-bottom: 56px;
}
.pmg-pagina .wp-block-post-content,
.pmg-pagina .pmg-texto {
  max-width: 68ch;
  font-size: 20px;
  line-height: 1.55;
}
.pmg-pagina .wp-block-post-content h2 {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-stretch: 75%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  font-size: 40px;
  margin: 56px 0 20px;
}
.pmg-pagina .wp-block-post-content p { margin: 0 0 20px; }
.pmg-pagina .wp-block-post-content a { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--pmg-acento); }

/* Móvil */
@media (max-width: 860px) {
  :root { --pmg-margen: 24px; }
  .pmg-barra { gap: 20px; }
  .pmg-hero { padding-top: 120px; padding-bottom: 100px; }
  .pmg-h1 { margin-bottom: 48px; }
  .pmg-intro .pmg-intro-texto,
  .pmg-intro .pmg-aparte { grid-column: 1 / -1; }
  .pmg-intro .pmg-aparte { order: 2; padding-top: 0; }   /* en móvil el enlace va después del texto */
  .pmg-intro .pmg-intro-texto { order: 1; }
  .pmg-intro .pmg-parrafo { font-size: 24px; }
  .pmg-area { padding: 28px 0; }
  .pmg-areas { padding-bottom: 100px; }
  .pmg-contacto .pmg-margen { padding-top: 100px; padding-bottom: 100px; }
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 0.15s ease; }
}

/* Accesibilidad: enlace para saltar al contenido, visible solo con teclado */
.pmg-saltar {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--pmg-acento);
  color: var(--pmg-fondo);
  padding: 8px 16px;
  font-weight: 700;
  z-index: 100;
}
.pmg-saltar:focus { left: 8px; }