/* ============================================================
   ReComunica — Estilos definitivos
   Diseño: sidebar vertical rojo + contenido crema
   ============================================================ */

:root {
  --red: #CC2A26;
  --red-deep: #A82220;
  --red-soft: #E8908D;
  --pink: #F0C5C2;
  --cream: #F4ECD8;
  --cream-light: #F9F2E0;
  --ink: #1A1A1A;
  --ink-soft: #2D2D2D;
  --gray: #6B6B6B;

  --font-sans: 'Barlow', -apple-system, system-ui, sans-serif;
  --font-italic: 'Barlow', Georgia, serif;

  --sidebar-w: 80px;
  --max: 1400px;
  --gutter: clamp(20px, 4vw, 60px);
}

@media (max-width: 600px) {
  :root { --sidebar-w: 56px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  margin-left: var(--sidebar-w);
}

::selection { background: var(--red); color: var(--cream); }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* ============ LOADER (logo ReComunica que se llena de izq a der) ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.9s cubic-bezier(.85,0,.15,1) 0.3s;
}

/* Cuando termina la animación, sube la cortina */
.loader.is-done {
  transform: translateY(-100%);
}

/* Si el usuario ya ha visto el loader esta sesión, no lo mostramos */
.loader.is-skipped {
  display: none;
}

.loader__logo {
  position: relative;
  width: min(70vw, 700px);
  aspect-ratio: 5 / 2; /* el ratio horizontal del logo ReComunica */
}

@media (max-width: 600px) {
  .loader__logo { width: 80vw; aspect-ratio: 5 / 2; }
}

/* Dos capas superpuestas usando el mismo SVG como máscara */
.loader__logo-base,
.loader__logo-fill {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('/img/logo-recomunica.svg');
  mask-image: url('/img/logo-recomunica.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Capa de abajo: el logo en cream oscurecido (vacío) */
.loader__logo-base {
  background-color: rgba(204, 42, 38, 0.15);
}

/* Capa de arriba: el logo en rojo, se va revelando de izquierda a derecha
   con clip-path animado (más fiable que background-position). */
.loader__logo-fill {
  background-color: var(--red);
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  animation: fillReveal 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

@keyframes fillReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0% 0 0);
    -webkit-clip-path: inset(0 0% 0 0);
  }
}

/* Evitar scroll mientras carga */
body.is-loading {
  overflow: hidden;
}

/* ============ SIDEBAR (rojo vertical fijo) ============ */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--red);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
}

/* Línea discontinua blanca pegada al borde derecho */
.sidebar::after {
  content: '';
  position: absolute;
  top: 24px; bottom: 24px;
  right: 8px;
  width: 1px;
  background-image: linear-gradient(to bottom, #fff 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}

/* Botón del logo Re arriba (sustituye a la hamburguesa) */
.sidebar__mark {
  width: 48px;
  height: 48px;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
  padding: 0;
  background: none;
  border: none;
  transition: transform 0.4s cubic-bezier(.7,0,.3,1);
}

.sidebar__mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar__mark:hover {
  transform: scale(1.08);
}

/* Cuando el menú está abierto, el logo rota ligeramente como feedback */
body.menu-open .sidebar__mark {
  transform: rotate(180deg);
}

@media (max-width: 600px) {
  .sidebar__mark { width: 38px; height: 38px; }
}

/* "ReComunica" vertical en el sidebar — el SVG real rotado.
   Usamos posición absoluta para que la rotación no afecte al layout
   y el logo pueda mostrarse a su tamaño natural. */
.sidebar__vertical {
  flex: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 20px 0;
}

.sidebar__vertical-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 30vh, 280px);
  height: 36px;
  transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-mask-image: url('/img/logo-recomunica.svg');
  mask-image: url('/img/logo-recomunica.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--cream);
}

@media (max-width: 600px) {
  .sidebar__vertical-mark {
    width: clamp(120px, 22vh, 200px);
    height: 26px;
  }
}

/* Iconos sociales abajo */
.sidebar__social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.sidebar__social a {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
}

.sidebar__social a:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.sidebar__social img { width: 32px; height: 32px; display: block; }

@media (max-width: 600px) {
  .sidebar__vertical span { font-size: 0.8rem; }
  .sidebar__social a { width: 28px; height: 28px; }
  .sidebar__social img { width: 24px; height: 24px; }
}

/* ============ MENU OVERLAY ============ */
.menu {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0; bottom: 0;
  background: var(--red);
  z-index: 90;
  display: flex;
  align-items: center;
  padding: 60px var(--gutter);
  transform: translateX(-105%);
  transition: transform 0.7s cubic-bezier(.7,0,.2,1);
}

body.menu-open .menu { transform: translateX(0); }

.menu__grid {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.menu__list a {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(.7,0,.2,1);
  display: inline-block;
}

.menu__list a:hover { color: var(--cream); transform: translateX(20px); }

.menu__list a.is-current { color: var(--cream); }

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0;
  /* Fondo provisional con tonos arena/desierto hasta que llegue el vídeo */
  background-color: #E8C896;
  background-image:
    linear-gradient(180deg, rgba(232, 200, 150, 0) 0%, rgba(180, 130, 70, 0.4) 100%),
    radial-gradient(ellipse at center 70%, rgba(180, 130, 70, 0.3) 0%, rgba(232, 200, 150, 0) 60%);
}

/* Vídeo de fondo del hero */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay sutil para mejorar legibilidad del logo sobre cualquier vídeo */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.hero__bg-note {
  position: absolute;
  top: 20px; right: 30px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 6px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 3;
}

.hero__logo {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 60px;
  width: 100%;
}

/* Frase cursiva superpuesta sobre el segundo vídeo (estilo Piranha) */
.hero__quote {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 60px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 0 0;
  /* Sombra más marcada para garantizar legibilidad sobre cualquier vídeo */
  filter: drop-shadow(0 4px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 60px rgba(0,0,0,0.3));
}

/* En hero--2 alineamos la frase a la izquierda-centro del vídeo */
.hero--2 {
  align-items: center;
}

/* Logo ReComunica gigante encima del vídeo, hecho con mask del SVG */
.hero__wordmark {
  width: 100%;
  max-width: 1400px;
  height: clamp(80px, 18vw, 280px);
  -webkit-mask-image: url('/img/logo-recomunica.svg');
  mask-image: url('/img/logo-recomunica.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  background-color: var(--cream);
  filter: drop-shadow(0 4px 30px rgba(0,0,0,0.25));
}

/* ============ SECTION BASE ============ */
.section {
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--red {
  background: var(--red);
  color: var(--cream);
}

.section--cream {
  background: var(--cream);
  color: var(--ink);
}

.section--image {
  min-height: 100vh;
  background-color: #E8C896;
  background-image:
    linear-gradient(180deg, rgba(232, 200, 150, 0) 0%, rgba(180, 130, 70, 0.5) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  color: var(--cream);
  filter: none;
}

/* Variante "compact": secciones que NO necesitan ocupar 100vh entero
   (testimonios, colaboraciones). Padding reducido para que respiren menos. */
.section--compact {
  min-height: 0;
  padding: clamp(50px, 7vw, 90px) var(--gutter);
  justify-content: flex-start;
}

.section__inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

/* ============ TEXTO INTRO (página 3 del PDF) ============ */
.intro-text {
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.2;
  font-weight: 800;
  max-width: 1300px;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-align: left;
}

.intro-text--cream { color: var(--cream); }

/* ============ FRASE GRANDE EN ITÁLICA (página 4 del PDF) ============ */
.big-quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  line-height: 1.15;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.02em;
  filter: drop-shadow(0 2px 20px rgba(0,0,0,0.3));
  max-width: 1100px;
}

/* ============ SECTION TITLES ============ */
.s-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--ink);
}

.s-title--red { color: var(--red); }

.s-subtitle {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.45;
  font-weight: 700;
  max-width: 760px;
  margin-bottom: 40px;
  color: var(--ink);
  letter-spacing: 0;
}

/* ============ TESTIMONIOS (página 5 del PDF) ============ */
.testimonials__carousel {
  position: relative;
  margin-top: 20px;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.testimonials__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 2rem;
  font-weight: 300;
  font-family: var(--font-italic);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  user-select: none;
}

.testimonials__btn:hover { transform: scale(1.2); }
.testimonials__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.testimonials__viewport {
  flex: 1;
  overflow: hidden;
}

.testimonials__track {
  display: flex;
  gap: 0;
  transition: transform 0.6s cubic-bezier(.7,0,.2,1);
}

.testimonials__item {
  flex: 0 0 25%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}

/* Marco estilo Piranha: un border cuadrado por dentro del item con un pequeño
   inset para dejar gap visible entre cuadros sin romper el cálculo de flex. */
.testimonials__item::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ink);
  pointer-events: none;
}

.testimonials__item img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .testimonials__item { flex: 0 0 33.333%; }
}
@media (max-width: 600px) {
  .testimonials__item { flex: 0 0 50%; }
}

/* ============ SOBRE DOLO + SERVICIOS (V3 según PDF aprobado) ============
   Bloque en dos mitades verticales: top rojo (BIO/PARA TI) y bottom cream
   (foto blueprint + 4 servicios + CTA). Cada mitad ocupa el ancho del viewport,
   pero el contenido se centra al ancho del section__inner. */
.dolo {
  width: 100%;
}

/* --- TOP (ROJO) --- */
.dolo__top {
  background: var(--red);
  color: var(--ink);
  padding: clamp(60px, 8vw, 110px) var(--gutter);
}

.dolo__top-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.dolo__header {
  margin-bottom: 0;
}

.dolo__name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.dolo__role {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--ink);
  margin-top: 4px;
}

/* Divider horizontal (línea sutil en cream) */
.dolo__divider {
  height: 1px;
  background: rgba(244, 236, 216, 0.45);
  margin: clamp(36px, 4vw, 60px) 0;
}

/* Columnas BIO + PARA TI */
.dolo__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
}

@media (max-width: 860px) {
  .dolo__columns { grid-template-columns: 1fr; gap: 40px; }
}

.dolo__col {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(20px, 2.5vw, 30px);
  align-items: start;
}

@media (max-width: 640px) {
  .dolo__col { grid-template-columns: 1fr; gap: 12px; }
}

.dolo__col-label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  color: var(--cream);
  text-transform: uppercase;
  padding-top: 2px;
}

.dolo__col-label--ink {
  color: var(--ink);
}

.dolo__col-text {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--cream);
}

.dolo__col-text p { margin-bottom: 16px; }
.dolo__col-text p:last-child { margin-bottom: 0; }
.dolo__col-text strong { font-weight: 700; color: var(--cream); }

/* --- BOTTOM (CREAM) --- */
.dolo__bottom {
  background: var(--cream);
  padding: clamp(50px, 7vw, 90px) var(--gutter);
}

.dolo__bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 920px) {
  .dolo__bottom-inner { grid-template-columns: 1fr; gap: 40px; }
}

.dolo__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Servicios (columna derecha) */
.dolo__services {
  display: flex;
  flex-direction: column;
}

.dolo__services-header {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(20px, 2.5vw, 30px);
  align-items: start;
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.15);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

@media (max-width: 640px) {
  .dolo__services-header { grid-template-columns: 1fr; gap: 8px; }
}

.dolo__services-tagline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.dolo__services-list {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.5vw, 32px);
}

.dolo__service {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: start;
}

.dolo__service-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.dolo__service-text h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.dolo__service-text p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* Botón Contactar (alineado a la izquierda dentro del bloque servicios, como en PDF V3) */
.dolo__cta {
  align-self: flex-start;
  margin-top: clamp(32px, 4vw, 48px);
  display: inline-block;
  padding: 14px 44px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid var(--red);
  transition: background 0.25s ease, color 0.25s ease;
}

.dolo__cta:hover {
  background: transparent;
  color: var(--red);
}

@media (max-width: 640px) {
  .dolo__cta { align-self: stretch; text-align: center; }
}

/* ============ VIDEO COLABORACIONES — carrusel infinito (mismo formato que testimonios) ============ */
.collab__carousel {
  position: relative;
  margin-top: 20px;
  max-width: 900px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.collab__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 2rem;
  font-weight: 300;
  font-family: var(--font-italic);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  user-select: none;
  background: none;
  border: none;
  cursor: pointer;
}

.collab__btn:hover { transform: scale(1.2); }

.collab__viewport {
  flex: 1;
  overflow: hidden;
}

.collab__track {
  display: flex;
  gap: 0;
  transition: transform 0.6s cubic-bezier(.7,0,.2,1);
}

.collab__item {
  flex: 0 0 25%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}

/* Mismo marco estilo Piranha que en testimonios */
.collab__item::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--ink);
  pointer-events: none;
}

.collab__item img {
  max-width: 60%;
  max-height: 60%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .collab__item { flex: 0 0 33.333%; }
}
@media (max-width: 600px) {
  .collab__item { flex: 0 0 50%; }
}

/* ============ CONTACTO INFO (página 6 inferior del PDF) ============ */
.contact-info {
  /* Doble background: línea de puntos arriba (mismo patrón que .contact-info__line de abajo) + fondo cream */
  background:
    linear-gradient(to right, var(--red) 50%, transparent 50%) top left / 12px 1px repeat-x,
    var(--cream);
  padding: 60px var(--gutter) 30px;
}

.contact-info__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 40px;
  align-items: end;
}

@media (max-width: 760px) {
  .contact-info__inner { grid-template-columns: 1fr; gap: 30px; }
}

.contact-info__block h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.contact-info__block p, .contact-info__block a {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-info__block a:hover { color: var(--red); }

.contact-info__icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
}

.contact-info__logo {
  width: clamp(80px, 9vw, 110px);
  height: clamp(80px, 9vw, 110px);
  -webkit-mask-image: url('/img/logo-re-mark.svg');
  mask-image: url('/img/logo-re-mark.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--red);
}

.contact-info__line {
  height: 1px;
  width: 100%;
  background-image: linear-gradient(to right, var(--red) 50%, transparent 50%);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  margin: 30px auto 0;
  position: relative;
}

.contact-info__line::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* ============ FOOTER LEGAL (página 7 del PDF) ============ */
.footer {
  background: var(--cream);
  padding: 80px var(--gutter) 40px;
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
}

.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

/* Logo grande del footer hecho con mask del SVG */
.footer__big-logo {
  width: 100%;
  max-width: 1200px;
  height: clamp(80px, 18vw, 240px);
  -webkit-mask-image: url('/img/logo-recomunica.svg');
  mask-image: url('/img/logo-recomunica.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  background-color: var(--red);
  margin-bottom: 30px;
}

.footer__legal {
  display: flex;
  gap: 30px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
  padding-top: 20px;
}

.footer__legal a:hover { color: var(--red); }

/* ============ WORK PAGE (página 14 del PDF) ============ */
.work__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--red);
  margin-bottom: 50px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 900px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .work__grid { grid-template-columns: 1fr; } }

.work-card {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ink);
  cursor: pointer;
}

.work-card__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.7,.3,1);
}

.work-card:hover .work-card__img { transform: scale(1.06); }

.work-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
  transition: background 0.4s ease;
}

.work-card:hover .work-card__overlay {
  background: linear-gradient(180deg, rgba(204,42,38,0.1) 0%, rgba(204,42,38,0.6) 100%);
}

.work-card__title {
  position: absolute;
  bottom: 20px; left: 20px; right: 20px;
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  letter-spacing: -0.02em;
  z-index: 2;
}

/* ============ WORK MODAL (vista detalle a pantalla completa) ============ */
.work-modal {
  position: fixed;
  inset: 0;
  background: var(--red);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  overflow-x: hidden;
}

.work-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.work-modal__content {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) 1.3fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(80px, 10vw, 120px) clamp(40px, 6vw, 100px);
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .work-modal__content {
    grid-template-columns: 1fr;
    padding: 100px var(--gutter) 60px;
  }
}

.work-modal__media {
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.7s 0.2s cubic-bezier(.4,0,.2,1),
              opacity 0.5s 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.work-modal.is-open .work-modal__media {
  transform: scale(1);
  opacity: 1;
}

.work-modal__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

.work-modal__label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  color: var(--cream);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.work-modal__info {
  color: var(--cream);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s 0.35s cubic-bezier(.4,0,.2,1),
              opacity 0.5s 0.35s ease;
}

.work-modal.is-open .work-modal__info {
  transform: translateY(0);
  opacity: 1;
}

.work-modal__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.work-modal__block {
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.work-modal__block:last-child {
  margin-bottom: 0;
}

.work-modal__block-label {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--cream);
  opacity: 0.75;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.work-modal__block p {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  color: var(--cream);
  margin: 0;
}

/* Botón X arriba a la derecha */
.work-modal__close {
  position: fixed;
  top: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  border: 2px solid var(--cream);
  font-size: 1.6rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  z-index: 9001;
  line-height: 1;
}

.work-modal__close:hover {
  background: var(--cream);
  color: var(--red);
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .work-modal__close { width: 44px; height: 44px; font-size: 1.3rem; }
}

/* Placeholders sin imagen */
.work-card--placeholder {
  background: linear-gradient(135deg, var(--red-soft), var(--pink));
}

.work-card--landscape { background: linear-gradient(135deg, #8FB87D, #4A6F3D); }
.work-card--food { background: linear-gradient(135deg, #C49B6C, #6B4423); }
.work-card--health { background: linear-gradient(135deg, #6B8E9E, #3D5A6B); }
.work-card--cards { background: linear-gradient(135deg, #B8A082, #6B5642); }
.work-card--sky { background: linear-gradient(135deg, #B5D6E8, #88BEDC); }

/* ============ CONTACT PAGE (página 11 del PDF) ============ */
/* ============ CONTACT PAGE (rediseño V2 según feedback Dolo) ============ */
.contact-page {
  padding: clamp(80px, 12vw, 140px) var(--gutter);
  /* Background con attachment:fixed para que la imagen NO se reposicione ni
     reescale cuando cambia la altura de la sección (reveals, etc.). Queda anclada
     al viewport mientras el contenido se desliza por encima.
     Nota: iOS Safari móvil ignora attachment:fixed por limitación del navegador,
     así que ahí se mostrará con comportamiento "scroll" (aceptable). */
  background:
    linear-gradient(rgba(244, 236, 216, 0.4), rgba(244, 236, 216, 0.4)) fixed,
    url('/img/background.png') center/cover fixed no-repeat,
    var(--cream);
  min-height: calc(100vh - 200px);
}

.contact-page__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

@media (max-width: 860px) {
  .contact-page__inner { grid-template-columns: 1fr; gap: 50px; }
}

.contact-page__intro {
  /* Bloque introductorio: título "Contact" y lead */
}

.contact-page__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  color: var(--red);
  margin-bottom: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.contact-page__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  max-width: 560px;
  color: var(--ink);
}

.contact-page__lead strong { font-weight: 700; }

.contact-page__form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.field {
  position: relative;
}

.field label {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 400;
}

.field__req {
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0 0 12px;
  border: none;
  border-bottom: 1.5px dashed var(--red);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--ink);
  border-bottom-style: solid;
}

.field textarea {
  resize: vertical;
  min-height: 0;
  line-height: 1.4;
}

/* Estilo específico para el dropdown "Tu interés" */
.field select {
  appearance: none;
  -webkit-appearance: none;
  /* Caja visual: outline rojo redondeado y flechita ▾ a la derecha */
  border: 1.5px solid var(--red);
  border-radius: 999px;
  padding: 8px 36px 8px 18px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23CC2A26' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-color: transparent;
  color: var(--red);
  font-weight: 600;
  max-width: 240px;
}

.field select:focus {
  border-color: var(--ink);
  color: var(--ink);
}

.field select option {
  color: var(--ink);
  background: var(--cream);
  font-weight: 400;
}

/* Puntito rojo decorativo al final de cada campo (no aplica al select) */
.field:not(:has(select))::after {
  content: '';
  position: absolute;
  right: -4px; bottom: 8px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
}

/* Opt-ins agrupados (marketing + RGPD) — gap reducido al mínimo */
.form__opt-ins {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.contact-page__submit {
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 40px;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 999px;
  transition: all 0.3s ease;
  border: 2px solid var(--red);
  cursor: pointer;
}

.contact-page__submit:hover {
  background: transparent;
  color: var(--red);
}

/* Widget hCaptcha: que respire dentro del form */
.h-captcha {
  margin: 10px 0 4px;
}

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.3,1), transform 0.9s cubic-bezier(.2,.7,.3,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ UTILS ============ */
.spacer-sm { height: 40px; }
.spacer-md { height: 80px; }

/* ============ MODALES LEGALES ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.75);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(6px);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--cream);
  color: var(--ink);
  max-width: 800px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(30px, 5vw, 60px);
  position: relative;
  transform: translateY(30px);
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

.modal__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.3s ease;
}

.modal__close:hover { background: var(--red); }

.modal__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  color: var(--red);
  padding-right: 60px;
}

.modal__body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.modal__body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--ink);
}

.modal__body p { margin-bottom: 14px; }
.modal__body strong { color: var(--ink); font-weight: 700; }
.modal__body a { color: var(--red); border-bottom: 1px solid var(--red); }
.modal__body ul { margin: 10px 0 14px 20px; }
.modal__body li { margin-bottom: 6px; list-style: disc; }

body.modal-open { overflow: hidden; }

/* ============ LETTER HOVER EFFECT (estilo piranha) ============ */
/* Las letras se "apagan" suavemente al estado por defecto.
   Al pasar por encima, cambian de color rápido,
   y vuelven a su estado original con un fade muy lento. */

/* Palabras envueltas: no se rompen entre líneas */
.hover-letters .word {
  display: inline-block;
  white-space: nowrap;
}

.hover-letters .letter {
  display: inline-block;
  color: var(--ink);
  transition: color 4s ease-out;
  cursor: default;
}

.hover-letters .letter:hover {
  color: var(--cream);
  transition: color 0.05s ease-in;
}

.hover-letters .space {
  display: inline-block;
  width: 0.28em;
}

/* Sobre fondo rojo (estilo Piranha): color base ink negro / gris oscuro,
   hover a cream brillante. La vuelta es lenta y elegante. */
.section--red .hover-letters .letter,
.section-piranha .hover-letters .letter {
  color: var(--ink);
}

.section--red .hover-letters .letter:hover,
.section-piranha .hover-letters .letter:hover {
  color: var(--cream);
}

/* ============ CHECKBOX RGPD + reCAPTCHA NOTICE ============ */
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}

.form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--red);
  cursor: pointer;
}

.form__consent label {
  cursor: pointer;
}

.form__consent a {
  color: var(--red);
  border-bottom: 1px solid var(--red);
}

.form__consent a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.form__recaptcha-notice {
  margin-top: 20px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--gray);
  font-style: italic;
}

.form__recaptcha-notice a {
  color: var(--red);
  text-decoration: underline;
}