/* =========================================================================
   URRETA — Componentes compartidos
   Topbar · Navbar · Botones · Iconos sociales · FAQ · Footer
   Referencia: artboard 1980px. 1rem = 16px.
   ========================================================================= */

/* ============================= BOTONES ============================== */

/* Botón de menú (navbar).
   El hover adopta el estado inicial del botón "Acceso a clientes": mismo
   degradado, mismo borde, mismo radio y misma sombra. El degradado no es
   animable, así que vive en un ::before que sólo cambia de opacidad. */
.btn-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;              /* 16 / 24 */
  border: 0.05rem solid transparent;
  border-radius: 4.0625rem;          /* 65 */
  background: var(--c-white);
  font-size: 1.5rem;                 /* 24 */
  font-weight: 200;
  line-height: normal;
  color: var(--c-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition:
    color         var(--t-medio) var(--e-suave),
    border-color  var(--t-medio) var(--e-suave),
    border-radius var(--t-medio) var(--e-suave),
    box-shadow    var(--t-medio) var(--e-suave),
    transform     var(--t-medio) var(--e-suave);
}
.btn-menu::before {
  content: '';
  position: absolute;
  inset: -0.05rem;
  border-radius: inherit;
  background-image: var(--grad-cta);
  opacity: 0;
  transition: opacity var(--t-medio) var(--e-suave);
}
.btn-menu__t { position: relative; }
.btn-menu:hover,
.btn-menu:focus-visible {
  border-radius: 2.875rem;           /* 46 — el del botón CTA */
  border-color: var(--c-border-pink);
  box-shadow: var(--shadow-cta);
  color: var(--c-cream);
  transform: translateY(-0.125rem);
}
.btn-menu:hover::before,
.btn-menu:focus-visible::before { opacity: 1; }
.btn-menu:active { transform: translateY(0); }
.btn-menu.is-active { font-weight: 700; }

/* Botón principal degradado */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;             /* 16 / 36 */
  border: 0.05rem solid var(--c-border-pink);   /* 0.8px */
  border-radius: 2.875rem;           /* 46 */
  background-image: var(--grad-cta);
  filter: drop-shadow(var(--shadow-cta));
  font-size: 1.5rem;
  font-weight: 300;
  line-height: normal;
  color: var(--c-cream);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform var(--t-medio) var(--e-suave),
    filter    var(--t-medio) var(--e-suave);
}
/* Destello que barre el botón al pasar el cursor */
.btn-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  transition: left var(--t-largo) var(--e-suave);
  pointer-events: none;
}
.btn-cta:hover,
.btn-cta:focus-visible {
  transform: translateY(-0.1875rem);
  filter: drop-shadow(0 0.5rem 0.5rem rgba(109, 20, 86, 0.32));
}
.btn-cta:hover::after,
.btn-cta:focus-visible::after { left: 115%; }
.btn-cta:active { transform: translateY(0) scale(0.985); }
.btn-cta[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* ===================== ENLACES DE TEXTO (correo / teléfono) ===========
   Mismo tamaño, peso y color que el texto donde viven: sólo añaden un
   subrayado que se dibuja al pasar el cursor.
   ====================================================================== */

.link-inline {
  position: relative;
  color: inherit;
  font: inherit;
  text-decoration: none;
  transition: opacity var(--t-medio) var(--e-suave);
}
.link-inline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.0625rem;
  height: var(--linea-1);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--t-medio) var(--e-suave);
}
.link-inline:hover,
.link-inline:focus-visible { opacity: 0.75; }
.link-inline:hover::after,
.link-inline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ========================== ICONOS SOCIALES ========================= */

.social-list {
  display: flex;
  align-items: center;
  gap: 0.9375rem;                    /* 15 */
}

.icon-circle {
  position: relative;
  display: block;
  width: 3.73725rem;                 /* 59.796 */
  height: 3.76075rem;                /* 60.172 */
  border-radius: 50%;
  background: #4C4C4C;
  flex: none;
  transition:
    background var(--t-medio) var(--e-suave),
    transform   var(--t-medio) var(--e-suave),
    box-shadow  var(--t-medio) var(--e-suave);
}
.icon-circle > .glifo img {
  transition: transform var(--t-medio) var(--e-suave);
}
.icon-circle:hover,
.icon-circle:focus-visible {
  background-image: var(--grad-cta);
  transform: translateY(-0.1875rem) scale(1.06);
  box-shadow: var(--shadow-cta);
}
.icon-circle:active { transform: translateY(0) scale(0.98); }
/* La flecha de "volver arriba" da un salto al pasar el cursor */
.footer__arriba:hover > .glifo--arrow-up img { transform: translateY(-12%); }
/* Anillo exterior con mezcla overlay (Figma: stroke #FFFAF3 1.98px) */
.icon-circle::after {
  content: '';
  position: absolute;
  inset: -0.0619rem;                 /* 0.99 */
  border: 0.1237rem solid var(--c-cream);   /* 1.979 */
  border-radius: 50%;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.icon-circle > .glifo {
  position: absolute;
  display: block;
}
.icon-circle > .glifo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Recortes exactos de cada glifo dentro del circulo (insets de Figma) */
.glifo--facebook  { inset: 25.13% 36.61% 25.13% 36.58%; }
.glifo--x         { inset: 31.92% 31.85% 32.52% 33.16%; }
.glifo--instagram { inset: 29.42% 29.18% 29.96% 29.94%; }
.glifo--arrow-up  { inset: 34.25% 24.99% 40.89% 24.99%; }
/* Los dos que no estaban en el diseno: se recortan al mismo aire visual que
   Instagram, que es el glifo cuadrado de referencia. */
.glifo--linkedin  { inset: 29.5%; }
.glifo--whatsapp  { inset: 28.5%; }

/* La flecha desborda su caja en Figma (inset interno -13.37% / -6.69%).
   Necesita la misma especificidad que .icon-circle > .glifo img para ganarle. */
.icon-circle > .glifo--arrow-up img {
  inset: auto;
  top: -13.37%;
  left: -6.69%;
  width: 113.38%;
  height: 126.74%;
}

/* ============================== TOPBAR ============================== */

/* El header (topbar + navbar) acompaña siempre al scroll.
   .u-page no tiene transform, así que position:fixed se resuelve contra el
   viewport y los offsets en rem del artboard siguen siendo válidos. */
.topbar {
  position: fixed;
  top: 0;
  left: -0.0625rem;                  /* -1 */
  width: 123.875rem;                 /* 1982 */
  height: 2.5761rem;                 /* 41.217 */
  background-image: linear-gradient(
    3.63deg,
    rgb(149, 31, 153)  5.5125%,
    rgb(239, 96, 96)  74.659%
  );
  z-index: 30;
}

.topbar__lang {
  position: absolute;
  top: 0.4113rem;                    /* 6.58 */
  font-size: 1.5rem;                 /* 24 */
  font-weight: 300;
  line-height: 1.75rem;              /* 28 */
  color: var(--c-white);
  text-transform: uppercase;
}
.topbar__lang--esp { left: 103.683rem; width: 2.75rem; }   /* 1658.93 / 44 */
.topbar__lang--eng { left: 111.692rem; width: 2.9375rem; } /* 1787.07 / 47 */

/* El diseño pinta los dos rótulos iguales, que es como se ve estando en
   español. Con dos idiomas de verdad hace falta saber en cuál estás: el que
   no se está viendo se atenúa, y al pasar por encima vuelve al blanco. */
a.topbar__lang {
  text-decoration: none;
  transition: opacity var(--t-corto) ease;
}
.topbar__lang:not(.is-activo) { opacity: 0.65; }
a.topbar__lang:hover,
a.topbar__lang:focus-visible { opacity: 1; }

.topbar__divider {
  position: absolute;
  top: 0.5856rem;                    /* 9.37 */
  left: 109.192rem;                  /* 1747.07 */
  width: var(--linea-1);
  height: 1.4051rem;                 /* 22.482 */
  background: var(--c-white);
}

/* ============================== NAVBAR ============================== */

.navbar {
  position: fixed;
  top: 2.5761rem;                    /* 41.217 */
  left: -0.0786rem;                  /* -1.257 */
  width: 123.875rem;                 /* 1982 */
  height: 6.9375rem;                 /* 111 */
  background: var(--c-white);
  box-shadow: 0 0.25rem 1.5rem rgba(109, 20, 86, 0.10);
  z-index: 20;
}

.navbar__logo img { transition: transform var(--t-medio) var(--e-suave); }
.navbar__logo:hover .navbar__logo-mark { transform: scale(1.06); }

.navbar__logo {
  position: absolute;
  top: 1.1875rem;                    /* 19 (60.22 - 41.22) */
  left: 6.2531rem;                   /* 100.05 */
  width: 11.8184rem;                 /* 189.095 */
  height: 4.5625rem;                 /* 73 */
}
/* El simbolo LOGO SECUNDARIO son dos piezas independientes: el isotipo
   (la "U") a la izquierda y el logotipo a su derecha, ambos a su tamano
   natural. Estirar una sola pieza a toda la caja deforma la marca. */
.navbar__logo img { position: absolute; display: block; max-width: none; }
.navbar__logo-mark {
  top: 0.25rem;                      /* 4.0 */
  left: 0.313rem;                    /* 5.009 */
  width: 3.0931rem;                  /* 49.49 */
  height: 3.9425rem;                 /* 63.08 */
}
.navbar__logo-texto {
  top: 1.5506rem;                    /* 24.81 */
  left: 4.559rem;                    /* 72.943 */
  width: 6.97rem;                    /* 111.52 */
  height: 1.8742rem;                 /* 29.99 */
}

.navbar__nav {
  position: absolute;
  top: 1.5rem;                       /* 24 (65.22 - 41.22) */
  left: 29.6094rem;                  /* 473.75 */
  display: flex;
  align-items: center;
  gap: 0.75rem;                      /* 12 */
}

.navbar__cta {
  position: absolute;
  top: 1.5rem;
  left: 100.7089rem;                 /* 1611.34 */
}

/* ============================== FAQ ================================= */

/* El bloque ocupa todo su tramo. Antes llevaba `top` y `height` en linea,
   distintos en cada pantalla porque cada artboard lo colocaba a una altura;
   ahora la altura la pone el tramo (ver inc/tramos.php) y la calcula el
   partial segun cuantas preguntas haya. */
.faq {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tramo-alto, 88.3125rem);
  background: var(--c-cream);
}

.faq__foto {
  position: absolute;
  width: 53.1783rem;                 /* 850.853 */
  height: 53.3696rem;                /* 853.913 */
  border-radius: 0.9375rem;          /* 15 */
  background: var(--c-primary);
  overflow: hidden;
}
/* Figma aplica scaleY(-1) rotate(180deg) = espejo horizontal.
   El espejo va en el CONTENEDOR: asi tambien se refleja el desplazamiento
   del recorte (left:-28.75%), no solo el contenido de la imagen. */
.faq__foto-flip {
  position: absolute;
  inset: 0;
  transform: scaleX(-1);
}
.faq__foto img {
  position: absolute;
  top: 0;
  left: -28.75%;
  width: 133.81%;
  height: 100%;
  max-width: none;
}

.faq__lista {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1.5625rem;                    /* 25 */
  width: 41.25rem;                   /* 660 */
  color: var(--c-primary);
}

/* Cada pregunta abre y cierra. Las alturas del diseño (200 / 396 px) se
   conservan como mínimos: el contenido nunca es menor, y la respuesta
   crece desde cero con la fila del grid. */
.faq__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 12.5rem;               /* 200 — alto cerrado del diseño */
  padding: 3.125rem;                 /* 50 */
  border-radius: 0.9375rem;
  background: var(--c-white);
  transition:
    min-height var(--t-largo) var(--e-suave),
    box-shadow var(--t-medio) var(--e-suave);
}
.faq__item--abierto { min-height: 24.75rem; }   /* 396 — alto abierto */
.faq__item:hover { box-shadow: 0 0.5rem 1.5rem rgba(143, 70, 100, 0.12); }

.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.faq__pregunta {
  width: 26.648rem;                  /* 426.368 */
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.25rem;              /* 36 */
  transition: line-height var(--t-medio) var(--e-suave);
}
.faq__item--abierto .faq__pregunta { line-height: 2.8116rem; }  /* 44.985 */
.faq__pregunta--ancha { width: 27.8956rem; }                    /* 446.33 */

/* El signo son los dos glifos de Spectral superpuestos: el "+" gira y se
   desvanece mientras entra el "−". */
.faq__signo {
  position: relative;
  width: 3.625rem;                   /* 58 */
  height: 2.8116rem;
  flex: none;
  font-family: 'Spectral', Georgia, serif;
  font-size: 4rem;                   /* 64 */
  font-weight: 300;
  line-height: 2.8116rem;
  text-align: center;
}
.faq__signo > span {
  position: absolute;
  inset: 0;
  display: block;
  transition:
    opacity   var(--t-medio) var(--e-suave),
    transform var(--t-largo) var(--e-suave);
}
.faq__signo-menos {
  font-weight: 200;
  opacity: 0;
  transform: rotate(-90deg) scale(0.55);
}
.faq__item--abierto .faq__signo-mas {
  opacity: 0;
  transform: rotate(90deg) scale(0.55);
}
.faq__item--abierto .faq__signo-menos {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* La fila del grid pasa de 0fr a 1fr: se puede animar, a diferencia de
   una altura automática. */
.faq__cuerpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-largo) var(--e-suave);
}
.faq__cuerpo > div { overflow: hidden; min-height: 0; }
.faq__item--abierto .faq__cuerpo { grid-template-rows: 1fr; }

.faq__respuesta {
  width: 35rem;                      /* 560 */
  padding-top: 1.25rem;              /* 20 — el row-gap del diseño */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.8125rem;            /* 45 */
  opacity: 0;
  transition: opacity var(--t-medio) var(--e-suave);
}
.faq__item--abierto .faq__respuesta {
  opacity: 1;
  transition-delay: 120ms;
}

.faq__sello {
  position: absolute;
  width: 12.1275rem;                 /* 194.04 */
  height: 12.06rem;                  /* 192.96 */
  overflow: hidden;
}
.faq__sello img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================== FOOTER ============================== */

.footer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 92.0066rem;                /* 1472.105 */
  background: #4C4C4C;
  color: var(--c-cream);
  overflow: hidden;
}

.footer__titulo {
  position: absolute;
  top: 11.365rem;                    /* 181.84 */
  left: 77.7913rem;                  /* 1244.66 */
  width: 31.2669rem;                 /* 500.271 */
  font-size: 4rem;                   /* 64 */
  font-weight: 200;
  line-height: normal;
}

.footer__intro {
  position: absolute;
  top: 17.7863rem;                   /* 284.58 */
  left: 77.7913rem;
  width: 36.2808rem;                 /* 580.493 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.8125rem;            /* 45 */
}

/* Mapa de contacto — lo dibuja Mapbox GL sobre este contenedor.
   El fondo y el aviso de reserva se ven si el script no llega a cargar. */
.footer__mapa {
  position: absolute;
  top: 12.2756rem;                   /* 196.41 */
  left: 4.9994rem;                   /* 79.99 */
  width: 62.7579rem;                 /* 1004.127 */
  height: 47.2327rem;                /* 755.723 */
  border-radius: 0.9375rem;
  overflow: hidden;
  background: #3A3A3A;
}
.footer__mapa .mapboxgl-map { font: inherit; }
.footer__mapa .mapboxgl-ctrl-logo,
.footer__mapa .mapboxgl-ctrl-attrib { font-size: 0.625rem; }
.footer__mapa.is-error::after {
  content: 'No fue posible cargar el mapa.';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(255, 250, 243, 0.6);
}

/* --- Formulario de contacto --- */
.footer__campo {
  position: absolute;
  left: 77.7913rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9375rem;                    /* 15 */
  width: 40.9375rem;                 /* 655 */
  height: 4.375rem;                  /* 70 */
}
.footer__campo--nombre  { top: 29.2419rem; }   /* 467.87 */
.footer__campo--correo  { top: 35.8675rem; }   /* 573.88 */
.footer__campo--mensaje { top: 42.4925rem; height: 10.0625rem; gap: 6.75rem; } /* 679.88 / 161 / 108 */

.footer__campo label,
.footer__campo .etiqueta {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.8116rem;            /* 44.985 */
  color: rgba(255, 250, 243, 0.3);
}
.footer__campo input,
.footer__campo textarea {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.8116rem;
  color: var(--c-cream);
  outline: none;
  resize: none;
}
.footer__campo input::placeholder,
.footer__campo textarea::placeholder { color: rgba(255, 250, 243, 0.3); }

.footer__linea {
  width: 35.6993rem;                 /* 571.188 */
  height: var(--linea-2);                  /* 2 */
  background: var(--c-cream);
  flex: none;
}
.footer__campo--mensaje .footer__linea { width: 35.5863rem; }  /* 569.381 */

.footer__enviar {
  position: absolute;
  top: 55.5706rem;                   /* 889.13 */
  left: 77.8081rem;                  /* 1244.93 */
  width: 35.6875rem;                 /* 571 */
  background-image: linear-gradient(
    29.86deg,
    rgb(225, 73, 110)  21.560%,
    rgb(252, 104, 156) 40.442%,
    rgb(200, 54, 150)  61.297%,
    rgb(200, 54, 150)  76.581%,
    rgb(239, 62, 177)  93.953%
  );
}

/* --- Datos de contacto --- */
.footer__dato {
  position: absolute;
  top: 66.5206rem;                   /* 1064.33 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.8125rem;            /* 45 */
}
.footer__dato--claim     { left: 4.995rem;   width: 21.1824rem; }  /* 79.92 / 338.919 */
.footer__dato--direccion { left: 35.8963rem; width: 31.8565rem; }  /* 574.34 / 509.704 */
.footer__dato--email     { left: 77.7913rem; width: 24.0883rem; }  /* 1244.66 / 385.413 */

/* --- Redes, volver arriba y línea divisoria --- */
.footer__social   { position: absolute; top: 74.0919rem; left: 4.995rem; }
.footer__arriba   { position: absolute; top: 74.0919rem; left: 115.0169rem; }  /* 1840.27 */
.footer__divisor  {
  position: absolute;
  top: 81.9925rem;                   /* 1311.88 */
  left: 4.995rem;
  width: 113.7601rem;                /* 1820.161 */
  height: var(--linea-2);
  background: var(--c-cream);
}

/* --- Legales --- */
.footer__legal {
  position: absolute;
  top: 85.4731rem;                   /* 1367.57 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.8125rem;
  white-space: nowrap;
}
.footer__legal--copy     { left: 35.8963rem; }
.footer__legal--terminos { left: 77.7913rem; }
.footer__legal--aviso    { left: 99.6838rem; }   /* 1594.94 */

/* --- Isotipo --- */
.footer__logo {
  position: absolute;
  top: 84.5031rem;                   /* 1352.05 */
  left: 5.0111rem;                   /* 80.18 */
  width: 4.7679rem;                  /* 76.29 */
  height: 4.7521rem;                 /* 76.03 */
}
.footer__logo img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===================== TARJETA DE PORTAL (compartida) ==================
   Se repite igual en "Acceso a Clientes" y en "Área de Trabajo": misma
   forma, mismos tamaños e idénticos desplazamientos internos.
   La página sólo aporta la posición del bloque.
   ====================================================================== */

.portal-card {
  position: absolute;
  width: 54.8125rem;                 /* 877 */
  height: 48.9898rem;                /* 783.836 */
}
.portal-card__icono { transition: transform var(--t-largo) var(--e-suave); }
.portal-card:hover .portal-card__icono { transform: translateY(-0.375rem) scale(1.06); }
.portal-card__forma { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal-card__icono { position: absolute; left: 9.3125rem; max-width: none; }

.portal-card__titulo {
  position: absolute;
  left: 9.3125rem;
  width: 36.25rem;                   /* 580 */
  height: 3.3125rem;                 /* 53 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2.5rem;                 /* 40 */
  font-weight: 300;
  line-height: normal;
  color: var(--c-primary);
}

.portal-card__texto {
  position: absolute;
  left: 9.3125rem;
  height: 5.5rem;                    /* 88 */
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2.5rem;               /* 40 */
  color: var(--c-primary);
}

.portal-card__cta {
  position: absolute;
  width: 22.6875rem;                 /* 363 */
  background-image: linear-gradient(
    42.09deg,
    rgb(225, 73, 110)  21.560%,
    rgb(252, 104, 156) 40.442%,
    rgb(200, 54, 150)  61.297%,
    rgb(200, 54, 150)  76.581%,
    rgb(239, 62, 177)  93.953%
  );
}

/* Variante A — tarjeta izquierda */
.portal-card--a .portal-card__icono { top: 9.5625rem; width: 5.7819rem; height: 5.2969rem; }
.portal-card--a .portal-card__titulo { top: 18.5625rem; }
.portal-card--a .portal-card__texto  { top: 23.3125rem; width: 30.875rem; }
.portal-card--a .portal-card__cta    { top: 35.5rem;    left: 9.25rem; }

/* Variante B — tarjeta derecha */
.portal-card--b .portal-card__icono { top: 9.625rem;  width: 6.2444rem; height: 5.2969rem; }
.portal-card--b .portal-card__titulo { top: 18.5rem; }
.portal-card--b .portal-card__texto  { top: 23.25rem;  width: 30.9375rem; }
.portal-card--b .portal-card__cta    { top: 35.4375rem; left: 9.3125rem; }

/* ================ PILAS DE CAPAS SVG (exportadas de Figma) =============
   Figma describe cada capa con insets porcentuales sobre su contenedor;
   cuando el trazo desborda, la capa se envuelve en un <span>.
   ====================================================================== */
.capa { position: absolute; display: block; max-width: none; }
.capa > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }


/* =================== RÓTULO VERTICAL DE SECCIÓN ======================
   Texto fijo al costado derecho con el nombre de la sección, girado 90°.
   `writing-mode: vertical-rl` gira la línea y los glifos de una vez, que
   es exactamente lo que hace el diseño.
   ====================================================================== */

.sello-seccion {
  position: fixed;
  top: 50%;
  right: 1.75rem;                    /* 28 */
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 1rem;                   /* 16 */
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.25rem;           /* 4 */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-primary);
  z-index: 15;
  pointer-events: none;
  user-select: none;
}

/* ==================== AVISO DE ENVÍO DE FORMULARIO ====================
   Se rellena desde js/urreta.js con la respuesta de Basin.
   ====================================================================== */

.form-aviso {
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 1.125rem;               /* 18 */
  font-weight: 300;
  line-height: 1.75rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity   var(--t-medio) var(--e-suave),
    transform var(--t-medio) var(--e-suave);
}
.form-aviso--ok,
.form-aviso--error { opacity: 1; transform: translateY(0); }
.form-aviso--ok    { color: var(--c-primary); }
.form-aviso--error { color: #C43C3C; }

/* Sobre el panel oscuro del footer el texto va en crema */
.footer .form-aviso--ok { color: var(--c-cream); }
.footer .form-aviso--error { color: #FFB3B3; }

/* Posición del aviso en cada formulario */
.footer__aviso     { top: 61.5rem; left: 77.7913rem; width: 35.6875rem; }
.experiencia__aviso { top: 921.5rem; left: 46.5rem; width: 60.625rem; text-align: center; }
.sp-form__aviso    { top: 45.25rem; }

/* ===================== SUBRAYADO DE CAMPOS DE TEXTO ===================
   La línea del campo se ilumina al enfocar. Se aplica igual en el footer
   (todas las pantallas), en "Tu experiencia" y en "Sé parte".
   ====================================================================== */

.footer__linea,
.exp-campo__linea,
.sp-campo__linea {
  transform-origin: left center;
  transition:
    transform var(--t-medio) var(--e-suave),
    opacity   var(--t-medio) var(--e-suave);
  opacity: 0.55;
}
.footer__campo:focus-within .footer__linea,
.exp-campo:focus-within .exp-campo__linea,
.sp-campo:focus-within .sp-campo__linea {
  opacity: 1;
  transform: scaleY(1.6);
}