/* ============================================================
   CAPA PREMIUM — DIAZA
   Efectos y acabados que se aplican a TODO el sitio.
   Se carga DESPUÉS de base.css y ANTES del CSS de cada página.

   Contiene:
     1. Escala tipográfica fluida y paleta ampliada
     2. Cabecera inteligente (se encoge, se vuelve cristal, se oculta)
     3. Barra de progreso de lectura
     4. Sistema de aparición al hacer scroll
     5. Tarjetas con brillo que sigue al cursor y leve inclinación 3D
     6. Botones magnéticos
     7. Botón "volver arriba" con anillo de progreso
     8. Formas orgánicas que respiran (identidad de salud)
     9. Grano sutil y detalles de acabado

   TODO el movimiento se apaga si el visitante activó "reducir
   movimiento" en su sistema (ver el bloque final).
   ============================================================ */

:root {
  /* --- Paleta ampliada (nace del azul y verde de la marca) --- */
  --azul-900: #06182B;   /* casi negro azulado: fondos profundos */
  --azul-800: #0A2540;
  --azul-700: #0D3050;
  --azul-600: #114268;
  --azul-500: #1565AD;   /* azul DIAZA */
  --azul-300: #6BA3D6;
  --azul-100: #D6E7F7;
  --azul-50:  #EEF6FF;

  --verde-600: #07A831;  /* verde DIAZA */
  --verde-400: #61CE70;
  --verde-100: #DFF5E4;

  --tinta-900: #0C2E4E;  /* títulos */
  --tinta-600: #47586B;  /* párrafos */
  --tinta-400: #5E7288;  /* textos secundarios */

  /* --- Sombras teñidas de azul (nunca negras) --- */
  --sombra-sm: 0 6px 18px -12px rgba(13, 48, 80, 0.35);
  --sombra-md: 0 14px 34px -20px rgba(13, 48, 80, 0.30);
  --sombra-lg: 0 28px 56px -24px rgba(13, 48, 80, 0.42);
  --sombra-xl: 0 44px 90px -40px rgba(13, 48, 80, 0.55);

  /* --- Curvas de movimiento --- */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);        /* salida suave */
  --curva-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Tipografía fluida: crece con la pantalla, sin saltos --- */
  --texto-xxl: clamp(2.4rem, 1.2rem + 4vw, 4.4rem);
  --texto-xl:  clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --texto-lg:  clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  --texto-md:  clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
}

/* Desplazamiento suave al usar anclas del menú */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* ============================================================
   1. BARRA DE PROGRESO DE LECTURA
   Cinta degradada arriba del todo que avanza con el scroll.
   ============================================================ */
.progreso-lectura {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 200; pointer-events: none;
  background: transparent;
}
.progreso-lectura__barra {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--verde-600), var(--verde-400), var(--azul-500));
  box-shadow: 0 0 12px rgba(97, 206, 112, 0.6);
  transition: width 0.1s linear;
}

/* ============================================================
   2. CABECERA INTELIGENTE
   Al bajar se encoge y se vuelve cristal esmerilado; al seguir
   bajando se esconde, y reaparece apenas subes.
   ============================================================ */
.cabecera {
  transition: transform 0.45s var(--curva), background-color 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
  will-change: transform;
}
.cabecera__inner { transition: padding 0.35s var(--curva); }
.cabecera__logo img { transition: transform 0.35s var(--curva); transform-origin: left center; }

/* Estado "compacta": cristal esmerilado y logo más pequeño */
body.scrolleado .cabecera {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 30px -18px rgba(13, 48, 80, 0.45);
}
body.scrolleado .cabecera__inner { padding-top: 4px; padding-bottom: 4px; }
body.scrolleado .cabecera__logo img { transform: scale(0.88); }

/* Estado "oculta": se va hacia arriba mientras bajas */
body.cabecera-oculta .cabecera { transform: translateY(-100%); }

/* ============================================================
   3. APARICIÓN AL HACER SCROLL
   Cualquier elemento con data-rv entra con un movimiento suave.
   El JS reparte los retrasos para que entren en cascada.
   ============================================================ */
[data-rv] {
  opacity: 0;
  transform: translate3d(var(--rv-x, 0), var(--rv-y, 32px), 0) scale(var(--rv-s, 1));
  filter: blur(var(--rv-blur, 0));
  transition:
    opacity 0.85s var(--curva) var(--rv-delay, 0s),
    transform 0.85s var(--curva) var(--rv-delay, 0s),
    filter 0.85s var(--curva) var(--rv-delay, 0s);
  will-change: opacity, transform;
}
[data-rv].rv-visible { opacity: 1; transform: none; filter: none; }

/* Variantes: desde la izquierda, derecha, con zoom o con desenfoque */
[data-rv="izq"]  { --rv-x: -42px; --rv-y: 0; }
[data-rv="der"]  { --rv-x: 42px;  --rv-y: 0; }
[data-rv="zoom"] { --rv-y: 18px; --rv-s: 0.94; }
[data-rv="foco"] { --rv-y: 20px; --rv-blur: 10px; }
[data-rv="sube"] { --rv-y: 46px; }

/* Títulos que entran palabra por palabra (lo arma el JS) */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; }
.palabra > span {
  display: inline-block;
  transform: translateY(105%) rotate(3deg);
  transition: transform 0.9s var(--curva) var(--p-delay, 0s);
}
.rv-visible .palabra > span, .palabras-listas .palabra > span { transform: none; }

/* ============================================================
   4. TARJETAS PREMIUM
   Brillo que sigue al cursor + inclinación 3D muy leve.
   El JS pone --mx/--my (posición del ratón) y --rx/--ry (giro).
   ============================================================ */
.tarjeta-premium {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--curva), box-shadow 0.4s;
}
.tarjeta-premium.con-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
}
/* Halo que sigue al cursor */
.tarjeta-premium::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
              rgba(97, 206, 112, 0.16), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
}
.tarjeta-premium:hover::before { opacity: 1; }

/* Borde que se ilumina al pasar el mouse */
.borde-vivo { position: relative; }
.borde-vivo::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(140deg, rgba(97,206,112,0.65), rgba(21,101,173,0.35), transparent 60%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
}
.borde-vivo:hover::after { opacity: 1; }

/* ============================================================
   5. BOTONES MAGNÉTICOS Y CON BRILLO
   ============================================================ */
.magnetico { transition: transform 0.25s var(--curva); }

/* Destello que cruza el botón al pasar el mouse */
.brillo { position: relative; overflow: hidden; }
.brillo::after {
  content: ""; position: absolute; top: 0; left: -140%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.brillo:hover::after { animation: destello 0.85s var(--curva); }
@keyframes destello { to { left: 160%; } }

/* ============================================================
   6. BOTÓN "VOLVER ARRIBA"
   Círculo con anillo que se va llenando según el scroll.
   ============================================================ */
.subir {
  position: fixed; right: 28px; bottom: 100px; z-index: 8999;
  width: 48px; height: 48px; border: 0; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: var(--color-blanco);
  box-shadow: var(--sombra-lg);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9);
  transition: opacity 0.35s, transform 0.35s var(--curva), visibility 0.35s;
}
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir:hover { transform: translateY(-3px); }
.subir:active { transform: scale(0.94); }
.subir:focus-visible { outline: 2px solid var(--verde-400); outline-offset: 3px; }
.subir svg.flecha { width: 17px; height: 17px; fill: var(--azul-500); position: relative; z-index: 1; }
/* Anillo de progreso */
.subir__anillo { position: absolute; inset: 0; transform: rotate(-90deg); }
.subir__anillo circle { fill: none; stroke-width: 3; }
.subir__anillo .pista { stroke: rgba(21, 101, 173, 0.15); }
.subir__anillo .avance { stroke: var(--verde-600); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }

/* ============================================================
   7. FORMAS ORGÁNICAS QUE RESPIRAN
   Manchas suaves de fondo: dan la sensación "salud y naturaleza"
   sin cargar la página. Se ponen con <span class="blob"></span>.
   ============================================================ */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--blob-tam, 420px); aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, var(--blob-color, rgba(97,206,112,0.22)), transparent 68%);
  filter: blur(var(--blob-desenfoque, 10px));
  border-radius: 45% 55% 52% 48% / 52% 45% 55% 48%;
  animation: respirar var(--blob-tiempo, 16s) ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 45% 55% 52% 48% / 52% 45% 55% 48%; }
  33%      { transform: translate3d(2%, -3%, 0) rotate(8deg) scale(1.06); border-radius: 55% 45% 48% 52% / 45% 55% 48% 52%; }
  66%      { transform: translate3d(-2%, 2%, 0) rotate(-6deg) scale(0.97); border-radius: 48% 52% 45% 55% / 55% 48% 52% 45%; }
}

/* ============================================================
   8. DETALLES DE ACABADO
   ============================================================ */

/* Grano finísimo sobre las secciones oscuras: quita la planitud digital */
.con-grano { position: relative; }
.con-grano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Fotos con acercamiento lentísimo (efecto cine) */
.ken-burns { animation: ken-burns 22s ease-in-out infinite alternate; }
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* Subrayado que se dibuja al pasar el mouse (enlaces de texto) */
.sub-anima { position: relative; }
.sub-anima::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--verde-600);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--curva);
}
.sub-anima:hover::after { transform: scaleX(1); transform-origin: left; }

/* Entrada de la página completa (evita el parpadeo blanco) */
body { animation: entrada-pagina 0.6s ease-out both; }
@keyframes entrada-pagina { from { opacity: 0; } to { opacity: 1; } }

/* El botón de WhatsApp sube un poco para no chocar con "volver arriba" */
.whatsapp-flotante { transition: transform 0.3s var(--curva), background-color 0.2s linear; }
.whatsapp-flotante:hover { transform: scale(1.06); }

/* ============================================================
   ACCESIBILIDAD: si el visitante pidió menos movimiento,
   se apaga TODO el movimiento de esta capa.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .palabra > span { transform: none !important; transition: none !important; }
  .blob, .ken-burns, body { animation: none !important; }
  .brillo:hover::after { animation: none; }
  .tarjeta-premium.con-tilt { transform: none !important; }
  .cabecera, .cabecera__inner, .cabecera__logo img { transition: none; }
  body.cabecera-oculta .cabecera { transform: none; }
  .subir { transition: opacity 0.2s; }
}

/* ============================================================
   RESPONSIVE de la capa premium
   ============================================================ */
@media (max-width: 767px) {
  html { scroll-padding-top: 80px; }
  .subir { right: 20px; bottom: 96px; width: 42px; height: 42px; }
  .subir svg.flecha { width: 15px; height: 15px; }
  /* En móvil no hay cursor: sin halo ni inclinación */
  .tarjeta-premium::before { display: none; }
  .tarjeta-premium.con-tilt { transform: none; }
  .blob { --blob-tam: 260px; }
}

/* ============================================================
   SISTEMA VISUAL PREMIUM (v2)
   Lo que de verdad hace que un sitio se vea caro: tipografía
   grande y apretada, mucho aire entre secciones y detalles
   editoriales. Se aplica a TODAS las páginas.
   ============================================================ */

/* --- Más aire: las secciones respiran --- */
main > section { padding-block: clamp(64px, 8vw, 132px); }
main > section.hero,
main > section.hero-portada,
main > section.hero-nosotros { padding-block: 0; }

/* --- Títulos: grandes, apretados y con jerarquía real --- */
.seccion-cabecera__titulo,
.servicio__titulo,
.funciona__titulo,
.testimonios__titulo,
.comparativa__titulo,
.sobre__titulo,
.equipo__titulo,
.staff__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-xl);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Párrafos de introducción: más grandes y aireados */
.seccion-cabecera__texto,
.intro__texto,
.novedades__texto,
.testimonios__bajada {
  font-size: var(--texto-md);
  line-height: 1.75;
  max-width: 62ch;
  margin-inline: auto;
}

/* --- Etiqueta de sección (el detalle editorial que más se nota) --- */
.etiqueta-seccion {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-family: var(--fuente-texto);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--verde-600);
}
.etiqueta-seccion::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor;
}

/* La cabecera de sección deja de estar encogida al 70% */
.seccion-cabecera { max-width: 760px; margin-inline: auto; }
.seccion-cabecera--angosta { max-width: 720px; }

/* Los divisores viejos con icono estorban al nuevo ritmo: se ocultan
   donde ya hay etiqueta de sección */
.seccion-cabecera:has(.etiqueta-seccion) .divisor-verde { display: none; }

/* ============================================================
   HERO DE LA PORTADA — composición editorial
   ============================================================ */
.hero-portada {
  position: relative; overflow: hidden;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  padding-block: clamp(90px, 12vh, 150px) clamp(120px, 16vh, 190px);
}
/* Velo más elegante: oscuro abajo-izquierda, deja ver la foto arriba-derecha */
.hero-portada::before {
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(97, 206, 112, 0.16), transparent 55%),
    linear-gradient(102deg, rgba(4, 18, 32, 0.95) 0%, rgba(6, 28, 48, 0.88) 38%, rgba(10, 42, 70, 0.42) 78%, rgba(10, 42, 70, 0.18) 100%);
  opacity: 1;
}
.hero-portada__inner { position: relative; z-index: 2; }
.hero-portada__caja { width: min(760px, 100%); gap: clamp(18px, 2.2vw, 26px); }

/* Título gigante: lo que más comunica "premium" */
.hero-portada__titulo {
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.hero-portada__titulo span {
  color: var(--verde-400);
  font-style: italic;              /* contraste editorial */
}
.hero-portada__texto {
  max-width: 54ch;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  line-height: 1.75;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
}

/* Dos llamadas a la acción: una sólida y una fantasma */
.hero-portada__acciones { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.boton-fantasma {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff; font-family: var(--fuente-texto);
  font-size: 15px; font-weight: 600;
  transition: background-color 0.3s, border-color 0.3s, transform 0.25s var(--curva);
}
.boton-fantasma svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.25s; }
.boton-fantasma:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.boton-fantasma:hover svg { transform: translateX(4px); }
.boton-fantasma:focus-visible { outline: 2px solid var(--verde-400); outline-offset: 3px; }

/* Cifras del hero: separadas por líneas finas, números enormes */
.hero-cifras {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 52px);
  margin: clamp(14px, 2vw, 26px) 0 0; padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cifra { display: flex; flex-direction: column; gap: 4px; }
.cifra__numero {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.cifra__texto {
  margin: 0; max-width: 22ch;
  font-family: var(--fuente-texto); font-size: 13.5px; font-weight: 400; line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}

/* Onda blanca que enlaza con la sección siguiente */
.hero-portada__onda {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  width: 100%; height: clamp(60px, 8vw, 110px);
}
.hero-portada__onda path { fill: #fff; }

/* ============================================================
   TARJETAS DE SERVICIO — editoriales, con número grande
   ============================================================ */
.servicios__grid { gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(34px, 4vw, 56px); }

.tarjeta-servicio {
  position: relative;
  padding: 0 0 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sombra-md);
  overflow: hidden;
}
/* El número grande, arriba a la derecha */
.tarjeta-servicio__numero {
  position: absolute; top: 14px; right: 20px; z-index: 2;
  font-family: var(--fuente-titulos);
  font-size: 46px; font-weight: 700; line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 2px 10px rgba(4, 18, 32, 0.35);
  font-variant-numeric: tabular-nums;
}
/* La foto ocupa todo el ancho arriba, sin margen */
.tarjeta-servicio__foto { position: relative; overflow: hidden; }
.tarjeta-servicio__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 24, 43, 0.45) 0%, transparent 45%);
}
.tarjeta-servicio img {
  width: 100%; height: clamp(210px, 22vw, 260px);
  object-fit: cover; border: 0; border-radius: 0;
}
.tarjeta-servicio h3,
.tarjeta-servicio p { padding-inline: clamp(20px, 2vw, 26px); text-align: left; }
.tarjeta-servicio h3 {
  margin-top: 22px;
  font-family: var(--fuente-titulos);
  font-size: 21px; font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--tinta-900);
}
.tarjeta-servicio p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--tinta-400); }
.tarjeta-servicio .boton { align-self: flex-start; margin-inline: clamp(20px, 2vw, 26px); }

/* ============================================================
   RESPONSIVE del sistema visual
   ============================================================ */
@media (max-width: 767px) {
  main > section { padding-block: clamp(48px, 9vw, 72px); }
  .hero-portada { min-height: 0; padding-block: 84px 110px; }
  .hero-portada__titulo { letter-spacing: -0.035em; }
  .hero-cifras { gap: 18px 26px; }
  .cifra__texto { font-size: 12.5px; }
  .hero-portada__acciones .boton,
  .hero-portada__acciones .boton-fantasma { width: 100%; justify-content: center; }
  .tarjeta-servicio__numero { font-size: 36px; }
}

/* ============================================================
   HERO DE PÁGINA INTERIOR (v2)
   Todas las páginas que no son la portada comparten esta
   entrada: fondo azul marino profundo, etiqueta, título muy
   grande y una onda blanca que enlaza con el contenido.
   ============================================================ */
main > section.hero {
  position: relative; overflow: hidden;
  min-height: clamp(300px, 42vh, 420px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(70px, 9vw, 120px) clamp(80px, 10vw, 130px);
  text-align: left;
}
/* Velo azul marino con brillo verde arriba a la derecha */
main > section.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 80% at 88% 4%, rgba(97, 206, 112, 0.20), transparent 55%),
    linear-gradient(102deg, rgba(4, 18, 32, 0.95) 0%, rgba(6, 28, 48, 0.88) 42%, rgba(10, 42, 70, 0.45) 100%);
  opacity: 1;
}
/* Onda blanca al pie, igual que en la portada */
main > section.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  height: clamp(48px, 6vw, 84px);
  background: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,120 480,10 720,42 C960,74 1200,120 1440,80 L1440,120 L0,120 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,120 480,10 720,42 C960,74 1200,120 1440,80 L1440,120 L0,120 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* El título del hero interior: grande, alineado a la izquierda */
main > section.hero .hero__titulo {
  position: relative; z-index: 1;
  width: min(var(--ancho-contenido), 100%);
  margin-inline: auto; padding-inline: 24px;
  text-align: left;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4rem);
  font-weight: 700; line-height: 1.03; letter-spacing: -0.04em;
  color: #fff; text-shadow: none;
  text-wrap: balance;
}
@media (max-width: 767px) {
  main > section.hero { min-height: 0; padding-block: 56px 70px; }
  main > section.hero .hero__titulo { padding-inline: 20px; }
}