/* =========================================================================
   URRETA — Piezas propias de WordPress
   -------------------------------------------------------------------------
   Lo que el maquetado estatico no necesitaba y el tema si: el enlace de salto
   al contenido, la trampa antispam de los formularios, la clase de solo
   lectores de pantalla y el marcado que el editor de bloques puede meter
   dentro del cuerpo de un articulo.
   ========================================================================= */

/* ---------- Accesibilidad ---------- */

/* Visible solo para lectores de pantalla. Es la receta del nucleo: nada de
   `display:none`, que los lectores tambien saltan. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Primer tabulador de la pagina: salta el header y lleva al contenido. */
.salta-al-contenido {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
  background: var(--c-white);
  box-shadow: var(--shadow-cta);
  font-size: 1rem;
  color: var(--c-primary);
  transform: translateY(-120%);
  transition: transform var(--t-medio) var(--e-suave);
}
.salta-al-contenido:focus-visible {
  transform: translateY(0);
  outline: 0.125rem solid var(--c-border-pink);
  outline-offset: 0.125rem;
}

/* ---------- Formularios ---------- */

/* Trampa antispam: fuera de pantalla, nunca oculta con display:none, que es
   lo primero que un robot detecta. */
.campo-trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Cuerpo del articulo ---------- */

/* El editor de bloques puede meter figuras, citas, listas y encabezados
   dentro de .bp-texto. Se les da el ritmo del diseno para que no desentonen
   con los parrafos que ya estaban. */
.bp-texto > * + * { margin-top: 1.5rem; }

.bp-texto h2,
.bp-texto h3 {
  margin-top: 3rem;
  font-weight: 300;
  line-height: 1.15;
}
.bp-texto h2 { font-size: 2.75rem; }
.bp-texto h3 { font-size: 2.25rem; }

.bp-texto ul,
.bp-texto ol { padding-left: 2rem; }
.bp-texto ul { list-style: disc; }
.bp-texto ol { list-style: decimal; }
.bp-texto li + li { margin-top: 0.5rem; }

.bp-texto a { text-decoration: underline; text-underline-offset: 0.2em; }

.bp-texto blockquote {
  padding-left: 2rem;
  border-left: 0.125rem solid var(--c-border-pink);
  font-style: italic;
}

.bp-texto figure { margin: 3rem 0; }
.bp-texto img { border-radius: 0.75rem; }
.bp-texto figcaption {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  opacity: 0.75;
}

.bp-texto .alignleft  { float: left;  margin: 0 2rem 1.5rem 0; }
.bp-texto .alignright { float: right; margin: 0 0 1.5rem 2rem; }
.bp-texto .aligncenter { margin-inline: auto; }

/* ---------- Estados vacios ---------- */

.sin-resultados {
  position: relative;
  padding: 4rem 0;
  font-size: 2rem;
  font-weight: 200;
  color: var(--c-primary);
  text-align: center;
}

/* ===================== CREDENCIAL CON DOCUMENTO ========================
   Las credenciales que acreditan algo (los dos certificados ISO) se vuelven
   pulsables. El enlace se superpone a la celda en vez de envolverla, asi que
   no cambia ni una coordenada del artboard.
   -------------------------------------------------------------------- */
.cred--enlace { transition: transform var(--t-medio) var(--e-suave); }
.cred--enlace:hover,
.cred--enlace:focus-within { transform: translateY(-0.25rem); }
.cred--enlace:hover .cred__linea,
.cred--enlace:focus-within .cred__linea { width: 8rem; transition: width var(--t-medio) var(--e-suave); }

.cred__doc {
  position: absolute;
  inset: -0.75rem;
  display: block;
  border-radius: 0.75rem;
}
.cred__doc:focus-visible { outline: 0.125rem solid var(--c-primary); outline-offset: 0.125rem; }


/* ======================= BOTON FLOTANTE DE WHATSAPP ====================
   No viene del diseno de Figma: lo pidio el cliente para todo el recorrido.
   Va en la esquina inferior derecha, que queda libre — el rotulo vertical
   de seccion ocupa el borde derecho pero termina muy por encima.

   Es una pastilla que se abre al pasar el cursor: en reposo solo el glifo,
   al enfocarla aparece el rotulo. Con el teclado se comporta igual.
   -------------------------------------------------------------------- */
.wa-flotante {
  position: fixed;
  right: 2.5rem;
  bottom: 2.5rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0;
  height: 3.75rem;                   /* 60, el mismo circulo del pie */
  padding: 0;
  border-radius: 1.875rem;
  background: #25D366;
  box-shadow: 0 0.5rem 1.25rem rgba(37, 211, 102, 0.35);
  color: var(--c-cream);
  transition:
    gap        var(--t-medio) var(--e-suave),
    padding    var(--t-medio) var(--e-suave),
    transform  var(--t-medio) var(--e-suave),
    box-shadow var(--t-medio) var(--e-suave);
}
.wa-flotante:hover,
.wa-flotante:focus-visible {
  gap: 0.75rem;
  padding-right: 1.5rem;
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.75rem 1.75rem rgba(37, 211, 102, 0.45);
}

.wa-flotante__glifo {
  position: relative;
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
}
.wa-flotante__glifo img {
  position: absolute;
  inset: 28.5%;
  width: 43%;
  height: 43%;
}

/* El rotulo no se oculta con display:none para que el lector de pantalla lo
   siga leyendo; se colapsa a cero de ancho. */
.wa-flotante__rotulo {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
  opacity: 0;
  transition:
    max-width var(--t-largo) var(--e-entrada),
    opacity   var(--t-medio) var(--e-suave);
}
.wa-flotante:hover .wa-flotante__rotulo,
.wa-flotante:focus-visible .wa-flotante__rotulo {
  max-width: 20rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wa-flotante,
  .wa-flotante__rotulo,
  .cred--enlace { transition: none; }
}


/* ====================== PUERTA DEL AREA DE TRABAJO =====================
   Reutiliza la tarjeta de portal y el boton del diseno. Se centra sobre el
   ancho del artboard, que es lo unico que hay en la pantalla.

   La tarjeta va en flujo normal, no en absoluto: el aire de arriba y el de
   abajo son padding, asi que valen lo mismo aunque la tarjeta crezca al
   aparecer el aviso de clave incorrecta.

   Arriba hay que sumarle el alto del header, porque en escritorio es `fixed`
   y no ocupa sitio en el flujo: sin ese sumando la tarjeta se le mete debajo
   y parece pegada a la barra.
   -------------------------------------------------------------------- */
.acceso {
  --acceso-aire: 9rem;
  --acceso-header: 9.5136rem;        /* topbar 2.5761 + navbar 6.9375 */

  width: 100%;
  padding-top: calc(var(--acceso-header) + var(--acceso-aire));
  padding-bottom: var(--acceso-aire);
  display: flex;
  justify-content: center;
}

.acceso__card {
  position: relative;
  width: 50rem;                      /* 800 */
  min-height: 28rem;
}
.acceso__forma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.acceso__cont {
  position: relative;
  padding: 5rem 6rem 4.5rem;
  color: var(--c-primary);
}

.acceso__titulo {
  font-size: 3rem;
  font-weight: 200;
  line-height: normal;
  margin-bottom: 1.25rem;
}
.acceso__texto {
  max-width: 34rem;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 2.25rem;
  margin-bottom: 2.5rem;
}

.acceso__form {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.acceso__campo {
  flex: 1 1 18rem;
  height: 3.9375rem;                 /* 63, el alto de boton del diseno */
  padding: 0 1.5rem;
  border: 0.05rem solid var(--c-border-pink);
  border-radius: 2.625rem;
  background: var(--c-white, #fff);
  font-family: inherit;
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--c-primary);
}
.acceso__campo:focus-visible {
  outline: 0.125rem solid var(--c-primary);
  outline-offset: 0.125rem;
}
.acceso__enviar { min-width: 12rem; }

.acceso__error {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  color: #C22;
}


@media (max-width: 479px) {
  .bp-texto h2 { font-size: 1.5rem; }
  .bp-texto h3 { font-size: 1.25rem; }
  .bp-texto > * + * { margin-top: 1rem; }
  .sin-resultados { padding: 2rem var(--mx); font-size: 1.125rem; }

  /* En movil el boton se queda en su circulo: el rotulo no cabe */
  .wa-flotante {
    right: 1rem;
    bottom: 1rem;
    height: 3.25rem;
  }
  .wa-flotante__glifo { width: 3.25rem; height: 3.25rem; }
  .wa-flotante:hover,
  .wa-flotante:focus-visible { gap: 0; padding-right: 0; }
  .wa-flotante__rotulo,
  .wa-flotante:hover .wa-flotante__rotulo { max-width: 0; opacity: 0; }

  .acceso { padding: 2.5rem var(--mx); }
  .acceso__card { width: 100%; min-height: 0; }
  .acceso__forma { display: none; }
  .acceso__cont {
    padding: 2rem 1.5rem;
    border-radius: 1.25rem;
    background: var(--c-white, #fff);
    box-shadow: 0 0.5rem 1.5rem rgba(109, 20, 86, 0.15);
  }
  .acceso__titulo { font-size: 1.625rem; }
  .acceso__texto { font-size: 0.9375rem; line-height: 1.5rem; margin-bottom: 1.5rem; }
  .acceso__form { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .acceso__campo { height: 3rem; font-size: 1rem; }
  .acceso__enviar { width: 100%; min-width: 0; }
  .acceso__error { font-size: 1rem; }
}