/* ============================================================
   COMPONENTS — nav, botones, cards, footer, WhatsApp flotante,
   placeholders, formularios, cursor custom
   ============================================================ */

/* ---------------------------------------------------------
   NAVEGACIÓN
   --------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--container-pad);
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85), rgba(10, 10, 10, 0));
  backdrop-filter: blur(6px);
  transition: background var(--duration-base) var(--ease-cinema);
}

.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
  box-shadow: var(--shadow-sm);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  z-index: calc(var(--z-nav) + 1);
}

.logo span {
  color: var(--color-accent);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-list {
  display: flex;
  gap: var(--space-lg);
}

.nav-list a {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--duration-fast) var(--ease-cinema);
}

.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-cinema);
}

.nav-list a:hover,
.nav-list a[aria-current='page'] {
  color: var(--color-text);
}

.nav-list a:hover::after,
.nav-list a[aria-current='page']::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: calc(var(--z-overlay) + 1);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-cinema), opacity var(--duration-fast) var(--ease-cinema);
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--color-bg);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: calc(var(--space-2xl) + var(--space-sm)) var(--container-pad) var(--space-xl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-cinema);
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }

  .nav-list a {
    display: block;
    font-size: clamp(1.15rem, 5vw, 1.75rem);
    font-family: var(--font-display);
  }

  .nav-cta {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
  }
}

@media (max-width: 768px) and (max-height: 600px) {
  .main-nav {
    padding-top: calc(var(--space-xl) + var(--space-sm));
  }

  .nav-list {
    gap: var(--space-xs);
  }

  .nav-list a {
    font-size: 1.15rem;
  }

  .nav-cta {
    margin-top: var(--space-md);
  }
}

/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-cinema),
    box-shadow var(--duration-fast) var(--ease-cinema),
    background-color var(--duration-fast) var(--ease-cinema),
    color var(--duration-fast) var(--ease-cinema);
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 480px) {
  .btn {
    white-space: normal;
  }
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-glow-accent);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 1.15rem 2.5rem;
  font-size: 1rem;
}

.btn-standout {
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: var(--shadow-glow-accent);
}

.btn-standout:hover {
  background: var(--color-accent-hover);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.55), 0 14px 50px rgba(var(--color-accent-rgb), 0.5);
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

/* En flujo normal (no absoluta): su altura la marca el video, así que
   cuando el video crece para igualar el ancho del título, el hero entero
   crece con él en vez de recortarlo a una pantalla. */
.hero-media {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Capa de fondo: mismo video, cubre toda la sección y queda difuminado
   para rellenar el espacio que deja la capa principal en pantallas anchas. */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(0.4);
  /* escala >1 evita que el blur deje ver bordes transparentes/nítidos */
  transform: scale(1.1);
}

/* Capa principal: nítida, conserva su proporción original (recortadas
   las barras negras del archivo fuente). El ancho lo fija main.js
   (--hero-video-w) para igualar el ancho renderizado del título y quedar
   alineada con él — el alto se deriva de ese ancho vía la proporción
   intrínseca del video; el valor por defecto es solo el fallback antes
   de que corra el JS. */
.hero-video-main {
  position: relative;
  z-index: 1;
  width: var(--hero-video-w, min(60vw, 520px));
  max-width: 94vw;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--color-border-strong);
}

.hero-sound-toggle {
  position: absolute;
  right: var(--container-pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: rgba(10, 10, 10, 0.5);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: border-color var(--duration-fast) var(--ease-cinema), transform var(--duration-fast) var(--ease-cinema);
}

.hero-sound-toggle:hover {
  border-color: var(--color-accent);
  transform: translateY(-50%) scale(1.06);
}

.hero-sound-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.hero-sound-toggle .icon-unmuted {
  display: none;
}

.hero-sound-toggle.is-unmuted .icon-muted {
  display: none;
}

.hero-sound-toggle.is-unmuted .icon-unmuted {
  display: block;
}

/* Scrim superior para dar contraste al título/subtítulo, por encima de
   ambas capas de video (incluida la nítida en mobile). Altura fija en vh
   (no inset:0) porque el hero puede ser mucho más alto que una pantalla
   y el scrim solo debe cubrir la zona del título, no todo el video. */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.4) 30%, transparent 100%);
}

.hero-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding-top: var(--space-2xl);
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

/* En pantallas angostas/verticales (móvil) quitamos el fondo difuminado,
   que ahí no aporta nada, pero el video principal mantiene su tamaño
   contenido (ajustado al ancho del título por main.js) en vez de cubrir
   toda la pantalla. Sin el fondo difuminado no hay nada que llene el
   min-height:100svh + centrado vertical de .hero-media (eso solo tiene
   sentido en pantallas anchas, donde el difuminado rellena ese espacio),
   así que aquí el hero se ajusta a su contenido: solo el aire justo para
   despejar el título (absoluto, ver .hero-top) y un cierre breve antes de
   la siguiente sección, en vez de un hueco negro de cientos de píxeles.
*/
@media (max-aspect-ratio: 9 / 16), (max-width: 640px) {
  .hero-video-bg {
    display: none;
  }

  .hero-media {
    min-height: 0;
    align-items: flex-start;
    padding-top: 15rem;
    padding-bottom: var(--space-xl);
  }
}

.hero-intro {
  text-align: center;
}

.hero-intro .hero-subtitle {
  max-width: 48ch;
  margin-inline: auto;
}

.hero-intro .hero-actions {
  justify-content: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.hero-title {
  font-size: clamp(0.7rem, 3.8vw, 1.5rem);
  font-weight: 600;
  max-width: none;
  white-space: nowrap;
  margin-bottom: var(--space-md);
}

/* En mobile el título no cabe en una sola línea sin desbordar el
   viewport (y con él, el ancho del video, calculado a partir del suyo
   en main.js) — se deja hacer wrap normal por debajo del breakpoint
   donde el resto del hero también pasa a su layout angosto. */
@media (max-width: 640px) {
  .hero-title {
    white-space: normal;
    max-width: 100%;
  }
}

.hero-subtitle {
  max-width: 48ch;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   PLACEHOLDERS DE MEDIA
   --------------------------------------------------------- */

.media-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--color-bg-elevated) 0%, var(--color-bg) 70%);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-dim);
  overflow: hidden;
  isolation: isolate;
}

.media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(var(--color-accent-rgb), 0.12), transparent 60%);
  z-index: -1;
}

.media-placeholder-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  transition: transform var(--duration-base) var(--ease-cinema), border-color var(--duration-base) var(--ease-cinema);
}

.media-placeholder:hover .media-placeholder-icon {
  transform: scale(1.08);
  border-color: var(--color-accent);
}

.media-placeholder-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text-muted);
}

.media-placeholder-label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-align: center;
  padding-inline: var(--space-md);
}

.media-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

/* Proporciones */
.ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.ratio-9-16 {
  aspect-ratio: 9 / 16;
}
.ratio-4-5 {
  aspect-ratio: 4 / 5;
}
.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* ---------------------------------------------------------
   SECCIONES / GENERAL
   --------------------------------------------------------- */

.section {
  padding: var(--space-3xl) 0;
}

.section-tight {
  padding: var(--space-2xl) 0;
}

.section-header {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}

.section-header h2 {
  margin-bottom: var(--space-sm);
}

.section-alt {
  background: var(--color-bg-alt);
}

.reveal {
  opacity: 1;
}

/* JS añade estas clases antes de animar con GSAP; sin JS, el contenido es visible por defecto */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}

/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--duration-base) var(--ease-cinema), border-color var(--duration-base) var(--ease-cinema);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.card-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.card h3 {
  margin-bottom: var(--space-2xs);
}

.card p {
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   GRID DE PORTAFOLIO
   --------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.filter-btn {
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-cinema);
}

.filter-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

.filter-btn[aria-pressed='true'] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: opacity var(--duration-base) var(--ease-cinema), transform var(--duration-base) var(--ease-cinema);
}

.portfolio-item video,
.portfolio-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-item.is-hidden {
  display: none;
}

.portfolio-restart-btn {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: border-color var(--duration-fast) var(--ease-cinema), color var(--duration-fast) var(--ease-cinema), transform var(--duration-fast) var(--ease-cinema);
}

.portfolio-restart-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: rotate(-45deg);
}

.portfolio-restart-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.portfolio-sound-icon {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(3px);
  transition: border-color var(--duration-fast) var(--ease-cinema), color var(--duration-fast) var(--ease-cinema);
}

.portfolio-sound-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.portfolio-sound-icon .icon-unmuted {
  display: none;
}

.portfolio-item.is-unmuted .portfolio-sound-icon {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.portfolio-item.is-unmuted .portfolio-sound-icon .icon-muted {
  display: none;
}

.portfolio-item.is-unmuted .portfolio-sound-icon .icon-unmuted {
  display: block;
}

.portfolio-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-cinema);
}

.portfolio-item:hover .portfolio-item-overlay,
.portfolio-item:focus-within .portfolio-item-overlay {
  opacity: 1;
}

.portfolio-item:hover {
  transform: scale(1.02);
}

.portfolio-item-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.portfolio-item-role {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.portfolio-item-category {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
}

/* ---------------------------------------------------------
   TABLA DE PAQUETES (Servicios)
   --------------------------------------------------------- */

.pricing-note {
  font-style: italic;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: start;
}

@media (max-width: 900px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
}

.pricing-card {
  position: relative;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-cinema), border-color var(--duration-base) var(--ease-cinema);
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}

.pricing-card--featured {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.15), var(--shadow-md);
}

.pricing-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.pricing-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
  padding-right: var(--space-xl);
}

.pricing-card-subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.pricing-card-heading {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-dim);
  margin-bottom: var(--space-sm);
}

.pricing-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pricing-card-list li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text);
}

.pricing-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------------------------------------------------------
   CIFRAS DESTACADAS (Sobre mí)
   --------------------------------------------------------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.stat {
  border-left: 1px solid var(--color-border-strong);
  padding-left: var(--space-md);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2xs);
}

.stat-label {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------
   ABOUT LAYOUT (Sobre mí)
   --------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ---------------------------------------------------------
   TESTIMONIOS
   --------------------------------------------------------- */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.testimonials-grid--featured {
  grid-template-columns: 1fr;
  justify-items: center;
}

.testimonials-grid--featured .testimonial-card {
  width: 100%;
  max-width: 480px;
}

.testimonial-card figcaption {
  margin-top: var(--space-sm);
}

.testimonial-name {
  font-family: var(--font-display);
  font-size: 1rem;
}

.testimonial-role {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------
   FORMULARIO DE CONTACTO
   --------------------------------------------------------- */

.form-grid {
  display: grid;
  gap: var(--space-md);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-field label {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  transition: border-color var(--duration-fast) var(--ease-cinema);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-field .field-error {
  color: var(--color-error);
  font-size: var(--fs-small);
  display: none;
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-color: var(--color-error);
}

.form-field.has-error .field-error {
  display: block;
}

.form-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-success {
  background: rgba(111, 174, 111, 0.12);
  color: var(--color-success);
}

.form-status.is-error {
  background: rgba(212, 110, 92, 0.12);
  color: var(--color-error);
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-split {
    grid-template-columns: 1fr;
  }
}

.contact-whatsapp-card {
  background: linear-gradient(155deg, rgba(37, 211, 102, 0.14), var(--color-bg-alt) 60%);
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

@media (max-width: 480px) {
  .contact-whatsapp-card {
    padding: var(--space-md);
  }
}

.contact-whatsapp-card .btn {
  background: var(--color-whatsapp);
  color: #06210f;
  margin-top: var(--space-md);
}

.contact-whatsapp-card .btn:hover {
  background: #2fe375;
}

/* ---------------------------------------------------------
   WHATSAPP FLOTANTE
   --------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-whatsapp);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-cinema);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  fill: #06210f;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-whatsapp);
  animation: whatsapp-pulse 2.6s ease-out infinite;
  z-index: -1;
}

@keyframes whatsapp-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float::before {
    animation: none;
    display: none;
  }
}

/* ---------------------------------------------------------
   CURSOR CUSTOM (desktop, pointer:fine)
   --------------------------------------------------------- */

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--duration-fast) var(--ease-cinema), height var(--duration-fast) var(--ease-cinema), background-color var(--duration-fast) var(--ease-cinema);
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor-dot.is-hovering {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--color-accent);
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-nav a {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  transition: color var(--duration-fast) var(--ease-cinema);
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-cinema), color var(--duration-fast) var(--ease-cinema);
}

.footer-social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-bottom {
  color: var(--color-text-dim);
  font-size: var(--fs-micro);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---------------------------------------------------------
   CTA FINAL (bloque reutilizable en todas las páginas)
   --------------------------------------------------------- */

.cta-band {
  text-align: center;
  padding: var(--space-2xl) 0;
}

.cta-band h2 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.cta-band p {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

.cta-band .btn {
  margin-inline: auto;
}