/*
Theme Name: groc-ou Management
Theme URI: https://groc-ou.com
Author: groc-ou Management
Description: Tema a medida para groc-ou Management. Reproduce el PDF original como una secuencia de pantallas conectadas por clic (portada ocre → boceto → logo → menú → secciones → Hablamos). El texto y las fotos de cada sección se editan desde Páginas. El teléfono y el email se editan desde Apariencia → Personalizar.
Version: 1.14.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: groc-ou
*/

/* =========================================================
   groc-ou Management — stylesheet
   ========================================================= */

:root {
  --ochre: #F0BC66;
  --ochre-dark: #DE9F45;
  --ink: #1A1A1A;
  --ink-soft: #4A4A4A;
  --paper: #FFFFFF;
  --paper-alt: #FAF7F2;
  --border: #E7E1D8;

  --font-display: "Jost", "Century Gothic", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1200px;
  --section-pad: clamp(64px, 10vw, 128px);

  /* Posición/tamaño del círculo ocre fijo (.back-circle), como fracción
     de pantalla — coordenadas reales del círculo en el PDF. Otros
     elementos (p. ej. la foto de Contacto) reutilizan estas variables
     para alinear su propio eje con el del círculo. */
  --circle-right: clamp(18px, 11.3vw, 140px);
  --circle-top: clamp(20px, 8.2vh, 90px);
  --circle-size: clamp(44px, 10.2vw, 150px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.05rem; font-weight: 500; }

p { margin: 0 0 1.1em; color: var(--ink-soft); }

strong { color: var(--ink); font-weight: 500; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

img { max-width: 100%; display: block; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--ochre-dark); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

/* =========================================================
   Pantallas a página completa (secuencia conectada por clic)
   ========================================================= */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
}
a.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---- Pantalla 1: portada ocre ---- */
.screen-ochre {
  background: var(--ochre);
}

/* ---- Pantallas 2 y 3: boceto y logo ----
   Las dos usan la MISMA regla de tamaño (misma clase, mismo max-width)
   sobre imágenes que son la captura completa de su pantalla del PDF, con
   idéntico encuadre. Así el círculo ocre —que forma parte de la imagen—
   cae siempre en el mismo píxel de la pantalla al pasar de boceto a logo,
   y da la sensación de quedarse fijo mientras el dibujo se transforma en
   el logotipo. */
.screen-sketch,
.screen-logo {
  background: var(--paper);
  padding: 40px;
}
.intro-frame-img {
  max-width: min(92vw, 1400px);
  width: 100%;
  height: auto;
}

/* pista visual sutil para animar a hacer clic en las 3 primeras pantallas */
.screen-ochre::after,
.screen-sketch::after,
.screen-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0.45;
  animation: groc-ou-bounce 1.8s ease-in-out infinite;
}
.screen-ochre::after { border-color: var(--ink); opacity: 0.55; }
@keyframes groc-ou-bounce {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 10px; }
}

/* ---- Pantalla 4: menú ---- */
.screen-menu {
  background: var(--paper);
  padding: clamp(28px, 5vw, 56px) 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-nav {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
}
.menu-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  /* gap más contenido y fuente que escala sobre todo con el ancho de
     pantalla (vw) para que los 4 elementos quepan siempre en una sola
     línea en escritorio/tablet, como en el PDF; en móviles muy
     estrechos, flex-wrap sigue de red de seguridad y los centra. */
  gap: clamp(10px, 1.6vw, 22px) clamp(16px, 3.2vw, 40px);
  margin: 0;
  padding: 0;
}
.menu-nav a {
  /* Sin font-family propia: hereda la tipografía del body (Inter), tal
     cual estaba en origen — no se toca la fuente del menú. */
  font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.9rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  padding-bottom: 6px;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}
.menu-nav a:hover,
.menu-nav a:focus-visible {
  border-color: var(--ink);
}

/* ---- Botón "volver al menú" (círculo ocre fijo) ----
   Posición y tamaño calculados a partir de las coordenadas reales del
   círculo en el PDF (idénticas en las páginas 5, 6, 7 y 8): centro en
   x=83.60% / y=17.28% de la página, diámetro ≈10.24% del ancho de
   página. Al fijarlo respecto a la pantalla (no a cada foto, que ocupa
   un espacio distinto en cada página) se reproduce la misma relación
   circulo↔página que en el PDF en todas las pantallas. */
.back-circle {
  position: fixed;
  top: var(--circle-top);
  right: var(--circle-right);
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: var(--ochre);
  z-index: 200;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.back-circle:hover,
.back-circle:focus-visible {
  transform: scale(1.1);
}

/* ---- Botón "volver al menú" — solo flecha, sin círculo (abajo a la
   izquierda) ---- */
.menu-text-link {
  position: fixed;
  left: clamp(18px, 4vw, 40px);
  bottom: clamp(18px, 4vh, 40px);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 2rem;
  line-height: 1;
  color: var(--ochre);
  opacity: 0.92;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.menu-text-link:hover,
.menu-text-link:focus-visible {
  opacity: 1;
  color: var(--ochre-dark);
  transform: scale(1.1) translateX(-2px);
}

/* ---- Pantallas de contenido (secciones) ---- */
.screen-content {
  padding: var(--section-pad) 0;
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
/* Fondo blanco en toda la web: la variante "alt" ya no cambia de color. */
.screen-content-alt {
  background: var(--paper);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  /* Arranca arriba (no centrado verticalmente), igual que en el PDF. */
  align-items: start;
}
.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }

.split-text p:last-child { margin-bottom: 0; }

/* La foto se muestra completa, sin recortar y a su calidad original —
   nada de recorte forzado a un marco fijo. El círculo ocre de "volver
   al menú" (.back-circle) es fijo respecto a la pantalla, no a la
   foto: en el PDF el círculo ocupa siempre el mismo punto de la
   página en las 4 pantallas con foto, mientras que cada foto cambia
   de tamaño — por eso se reproduce igual usando una posición fija. */
.split-media {
  position: relative;
}
.split-media img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
}
.split-media .no-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

/* Bloque logo + "todos los derechos reservados" al pie de cada pantalla
   de contenido. Se ancla del lado derecho por defecto para no solaparse
   nunca con .menu-text-link, que está fijo abajo a la izquierda. */
.corner-logo-block {
  position: absolute;
  bottom: 32px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 130px;
}
.corner-logo-block .corner-logo-link {
  display: block;
  width: 130px;
  max-width: 130px;
  transition: opacity 0.2s ease;
}
.corner-logo-block .corner-logo-link:hover,
.corner-logo-block .corner-logo-link:focus-visible {
  opacity: 0.75;
}
.corner-logo-block img {
  display: block;
  width: 130px;
  max-width: 130px;
  height: auto;
  opacity: 0.9;
}
.corner-logo-block.corner-logo-right {
  right: 5%;
  align-items: flex-end;
}
.corner-logo-block.corner-logo-left {
  left: 5%;
  align-items: flex-start;
}
.corner-rights {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .corner-logo-block { display: none; }
}

/* ---------- Contacto ---------- */
.contact-block h3 {
  color: var(--ochre-dark);
  margin-bottom: 8px;
}
.contact-block p { margin-bottom: 22px; }

.contact-links {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--ink);
  transition: color 0.2s ease;
}
.contact-links a:hover { color: var(--ochre-dark); }
.contact-links svg {
  width: 22px;
  height: 22px;
  color: var(--ochre-dark);
  flex-shrink: 0;
}

/* Logo chico junto a los datos de contacto (enlaza a Inicio). El aviso
   de derechos reservados va aparte, en la esquina inferior derecha
   (.corner-rights-only), para no repetir el logo dos veces. */
.contact-info-logo {
  margin-top: 28px;
}
.contact-info-logo .corner-logo-link {
  display: inline-block;
  width: 130px;
  transition: opacity 0.2s ease;
}
.contact-info-logo .corner-logo-link:hover,
.contact-info-logo .corner-logo-link:focus-visible {
  opacity: 0.75;
}
.contact-info-logo img {
  display: block;
  width: 130px;
  max-width: 130px;
  height: auto;
  opacity: 0.9;
}

.next-link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  border-bottom: 2px solid var(--ochre);
  padding-bottom: 3px;
}
.next-link:hover { color: var(--ochre-dark); }

/* Pantalla de Contacto (pantalla 8 del PDF): datos de contacto y
   formulario van uno junto al otro (mismo renglón superior, separación
   chica entre ambos) para leerse como un mismo bloque; la foto ("el
   traje") es grande y va más abajo y hacia la derecha, con su eje
   horizontal alineado al del círculo ocre fijo (.back-circle) — ambos
   comparten las mismas variables --circle-right/--circle-size.

   En esta pantalla, además, --circle-right se redefine para que el
   círculo y la foto queden pegados al borde del contenedor (.container,
   ancho máx. 1200px) en vez de al borde real de la pantalla — así, en
   monitores anchos, todo el conjunto (texto + foto + círculo) queda
   centrado como un solo bloque en vez de esparcido de punta a punta. */
.screen-contacto {
  --circle-right: calc((100vw - min(100vw, var(--max-width))) / 2 + 16px);
}
.contact-grid {
  display: grid;
  /* Columnas de ancho fijo (no 1fr/0.85fr) para que el formulario quede
     pegado junto al texto de contacto, sin importar cuánto ancho libre
     quede hasta la foto de la derecha. */
  grid-template-columns: minmax(260px, 380px) minmax(260px, 320px);
  justify-content: start;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}
.contact-form-wrap {
  display: block;
}
/* La foto se saca del flujo de la grilla y se posiciona respecto a toda
   la pantalla (igual que el círculo), para poder alinear su eje central
   con el del círculo con precisión, sea cual sea el tamaño de pantalla. */
.contact-photo {
  --photo-size: clamp(300px, 34vw, 500px);
  position: absolute;
  top: clamp(360px, 54vh, 560px);
  right: calc(var(--circle-right) + (var(--circle-size) - var(--photo-size)) / 2);
  width: var(--photo-size);
  z-index: 1;
}
.contact-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.contact-form {
  width: 100%;
  max-width: 300px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(16px, 2vw, 22px);
}
.form-row {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-row label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-row input,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--ochre);
  background: var(--paper);
}
.form-row.is-honeypot { position: absolute; left: -9999px; top: -9999px; }
.contact-form .btn { width: 100%; text-align: center; border: none; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.form-status {
  margin: 12px 0 0;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form-status.success { color: #3f7a3f; }
.form-status.error { color: #b3432b; }

/* ---- Pantalla 9: Hablamos ---- */
.screen-hablamos {
  background: var(--paper);
  display: flex;
  align-items: center;
}
/* El círculo grande de Menú y el de Hablamos comparten exactamente la
   misma regla de tamaño/posición (mismo punto de origen, mismo diámetro),
   para que el amarillo se vea igual en las dos pantallas. */
.menu-circle,
.hablamos-circle {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: min(54vw, 700px);
  height: min(54vw, 700px);
  border-radius: 50%;
  background: var(--ochre);
  z-index: 0;
}
.hablamos-hat {
  position: absolute;
  z-index: 1;
  width: min(27vw, 330px);
  left: 36%;
  top: 20%;
  transform: rotate(-4deg);
}
.hablamos-hand {
  position: absolute;
  z-index: 1;
  width: min(33vw, 400px);
  left: -2%;
  top: 64%;
}
@media (max-width: 780px) {
  .hablamos-hat, .hablamos-hand { display: none; }
}
.hablamos-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hablamos-content h1 {
  /* El tamaño escala en vw igual que el círculo grande (.hablamos-circle
     usa min(54vw,700px)), para que la relación de tamaño entre el texto
     y el círculo se mantenga en cualquier ancho de pantalla. */
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  margin-bottom: 0.6em;
}

/* ---------- Página genérica (page.php) ---------- */
.standalone-page {
  padding: var(--section-pad) 0;
  max-width: 760px;
  margin: 0 auto;
}
.standalone-page .featured-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 32px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .split,
  .split-reverse .split-text,
  .split-reverse .split-media {
    order: initial;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split-media { order: -1; }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  /* En mobile la foto vuelve al flujo normal (arriba de todo, como el
     resto de las secciones), en vez de ir posicionada respecto al
     círculo — que en estos anchos ya no tiene tanto espacio libre. */
  .contact-photo {
    position: static;
    order: -1;
    width: 100%;
    margin: 0 0 24px;
  }
  .contact-photo img { max-width: 320px; margin: 0 auto; }
  .contact-form { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .contact-links a { font-size: 0.92rem; }
  .menu-text-link { font-size: 1.6rem; }
}