/* ==========================================================================
   TestPsicométrico - Página de inicio pública
   --------------------------------------------------------------------------
   Hoja independiente del tema administrativo. La página pública y el panel
   interno son dos productos distintos para dos públicos distintos: mezclar
   sus estilos obliga a pelearse con reglas que no se escribieron para esto.

   PALETA: azul profundo y verde azulado sobre blanco. Sobria a propósito.
   Una plataforma que insiste en que sus resultados son indicadores y no
   dictámenes no puede presentarse con la estética de una app de premios.
   ========================================================================== */

:root {
    --tinta:        #001F49;   /* texto principal */
    --tinta-suave:  #4C5F7A;   /* texto secundario */
    --azul:         #003275;   /* primario */
    --azul-oscuro:  #001F49;   /* hover del primario */
    --azul-tenue:   #E8EEF7;   /* fondos suaves */
    --verde:        #146C43;   /* acento */
    --verde-tenue:  #E8F5EE;
    --ambar:        #8A5A12;   /* avisos, sobre fondo claro */
    --ambar-tenue:  #fdf4e6;
    --linea:        #DCE3EE;
    --fondo:        #F7F9FC;
    --blanco:       #ffffff;
    --radio:        10px;
    --radio-lg:     16px;
    --sombra:       0 1px 2px rgba(0, 31, 73, .07), 0 8px 24px rgba(0, 31, 73, .07);
    --ancho:        1140px;

    /* ------------------------------------------------------------------
       HYBPEOPLE. Los dos colores salen del logotipo, medidos del archivo:
       azul marino #001F49 y naranja #FF6100.

       El naranja NO se usa para texto sobre blanco. Da 3.02:1 y el minimo
       para leer es 4.5:1; se veria "de marca" y seria ilegible para mucha
       gente. Se usa como acento en superficies -sobre el menu oscuro llega
       a 5.39:1- y para textos sobre claro esta --naranja-texto, que es el
       mismo tono oscurecido hasta cumplir, incluso sobre su propio tinte.

       El verde, el ambar y el rojo NO son colores de marca y por eso no se
       tocaron: son semantica. Pintar de naranja lo que significa "correcto"
       solo porque el naranja esta de moda en la marca deja al usuario sin
       saber si algo salio bien o requiere su atencion.
       ------------------------------------------------------------------ */
    --naranja:        #FF6100;
    --naranja-texto:  #BF4900;
    --naranja-tenue:  #FFF0E6;
    --naranja-borde:  #FFD2B3;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible: no se quita nunca. Hay quien navega sin ratón. */
a:focus-visible, button:focus-visible, .boton:focus-visible {
    outline: 3px solid var(--naranja-texto);
    outline-offset: 3px;
    border-radius: 4px;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

/* Texto solo para lector de pantalla: da contexto a quien no ve la pantalla
   sin ocupar espacio para quien sí la ve. */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.95rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p  { margin: 0 0 1rem; }

.salta-al-contenido {
    position: absolute; left: -9999px; top: 0; background: var(--azul);
    color: #fff; padding: 12px 20px; z-index: 200;
}
.salta-al-contenido:focus { left: 0; }

/* --------------------------------------------------------------- encabezado */
.cabecera {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
    display: flex; align-items: center; gap: 28px;
    height: 72px;
}
.marca { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.marca:hover { text-decoration: none; }
.marca__texto { font-size: 1.16rem; font-weight: 700; color: var(--tinta); letter-spacing: -.02em; }
.marca__texto b { color: var(--tinta); font-weight: 700; }
/* PEOPLE en naranja. Es texto grande y en negritas -1.16rem a 700-, asi que
   el minimo que le aplica es 3:1 y no 4.5:1; con #FF6100 da 3.02:1 y cumple
   por poco. En texto normal no se usa: para eso esta --naranja-texto. */
.marca__texto .marca-dos { color: var(--naranja); font-weight: 700; }
.marca__isotipo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.marca__texto span { font-weight: 400; }

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a { color: var(--tinta-suave); font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--azul); text-decoration: none; }

/* OJO: `.nav a` pesa mas que `.boton--primario` (clase + elemento contra clase
   sola), asi que sin estas dos reglas el boton de acceso saldria con el color
   gris del menu sobre fondo azul: ilegible. Se repiten aqui a proposito. */
.nav a.boton--primario { color: #fff; }
.nav a.boton--primario:hover { color: #fff; }

.nav-movil {
    display: none; margin-left: auto; background: none; border: 1px solid var(--linea);
    border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--tinta);
}

/* ------------------------------------------------------------------ botones */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--radio); font-weight: 600; font-size: .97rem;
    border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    text-align: center;
}
.boton:hover { text-decoration: none; }
.boton--primario { background: var(--azul); color: #fff; }
.boton--primario:hover { background: var(--azul-oscuro); color: #fff; }
.boton--linea { background: #fff; color: var(--azul); border-color: #b9cfe2; }
.boton--linea:hover { border-color: var(--azul); background: var(--azul-tenue); }
.boton--claro { background: #fff; color: var(--azul); }
.boton--claro:hover { background: var(--azul-tenue); }
.boton--grande { padding: 15px 30px; font-size: 1.03rem; }

/* -------------------------------------------------------------------- héroe */
.heroe {
    background:
        radial-gradient(1100px 460px at 88% -12%, var(--verde-tenue) 0%, rgba(255,255,255,0) 62%),
        linear-gradient(180deg, var(--azul-tenue) 0%, #fff 72%);
    padding: 76px 0 64px;
    border-bottom: 1px solid var(--linea);
}
.heroe__rejilla { display: grid; grid-template-columns: 1.18fr .82fr; gap: 52px; align-items: center; }
.etiqueta {
    display: inline-block; background: var(--verde-tenue); color: var(--verde);
    font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}
.heroe p.entrada { font-size: 1.13rem; color: var(--tinta-suave); max-width: 34em; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.heroe__nota { margin-top: 22px; font-size: .9rem; color: var(--tinta-suave); max-width: 38em; }

/* Cifras: son datos del producto, no presunciones de clientes. */
.cifras {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 44px; border: 1px solid var(--linea); border-radius: var(--radio-lg);
    background: #fff; overflow: hidden;
}
.cifra { padding: 20px 22px; border-right: 1px solid var(--linea); }
.cifra:last-child { border-right: 0; }
.cifra__valor { font-size: 1.72rem; font-weight: 700; color: var(--azul); line-height: 1.1; }
.cifra__texto { font-size: .87rem; color: var(--tinta-suave); margin-top: 2px; }

/* Tarjeta ilustrativa del héroe */
.muestra {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
    box-shadow: var(--sombra); padding: 22px;
}
.muestra__cabeza { display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px solid var(--linea); padding-bottom: 12px; margin-bottom: 16px; }
.muestra__titulo { font-weight: 700; font-size: .98rem; }
.muestra__folio { font-size: .78rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.barra { margin-bottom: 14px; }
.barra__fila { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 5px; }
.barra__nombre { color: var(--tinta); }
.barra__valor { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.barra__riel { height: 8px; background: #eef3f7; border-radius: 999px; overflow: hidden; }
.barra__relleno { height: 100%; border-radius: 999px; background: var(--azul); }
.barra__relleno--verde { background: var(--verde); }
.barra__relleno--ambar { background: #c98a2b; }
.muestra__pie {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea);
    font-size: .82rem; color: var(--tinta-suave);
}

/* ----------------------------------------------------------------- secciones */
.seccion { padding: 78px 0; }
.seccion--gris { background: var(--fondo); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion__cabeza { max-width: 44em; margin-bottom: 42px; }
.seccion__cabeza p { color: var(--tinta-suave); font-size: 1.06rem; margin-bottom: 0; }

/* ------------------------------------------------------------------- NOM-035 */
.norma {
    background: linear-gradient(135deg, #0d3f6b 0%, #12558a 55%, #0e6f78 100%);
    color: #fff; padding: 62px 0;
}
.norma h2 { color: #fff; }
.norma p { color: #d7e6f2; }
.norma__rejilla { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.norma__lista { list-style: none; padding: 0; margin: 22px 0 0; }
.norma__lista li {
    display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
    border-top: 1px solid rgba(255,255,255,.18); color: #eaf3f9; font-size: .97rem;
}
.norma__lista li:first-child { border-top: 0; }
.norma__lista b { color: #fff; }
.norma__marca {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.18); display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; margin-top: 2px;
}
.norma__caja {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radio-lg); padding: 26px;
}
.norma__caja h3 { color: #fff; }
.norma__tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.norma__tabla th, .norma__tabla td { text-align: left; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.16); color: #e3eff7; }
.norma__tabla th { color: #fff; font-weight: 600; }
.norma__tabla tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- instrumentos */
.rejilla { display: grid; gap: 22px; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }

.tarjeta {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
    padding: 26px; display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tarjeta:hover { border-color: #b9cfe2; box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta__clave {
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; color: var(--verde);
    text-transform: uppercase; margin-bottom: 8px;
}
.tarjeta p { color: var(--tinta-suave); font-size: .95rem; flex: 1 1 auto; }
.tarjeta__pie {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--linea);
}
.pastilla {
    font-size: .78rem; padding: 4px 10px; border-radius: 999px;
    background: var(--azul-tenue); color: var(--azul); font-weight: 600;
}
.pastilla--verde { background: var(--verde-tenue); color: var(--verde); }
.pastilla--ambar { background: var(--ambar-tenue); color: var(--ambar); }

/* -------------------------------------------------------------------- pasos */
.paso { position: relative; padding-left: 56px; }
.paso__numero {
    position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
    background: var(--azul); color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 1rem;
}
.paso p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 0; }

/* ----------------------------------------------------------- lo que no hace */
.limite {
    background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--verde);
    border-radius: var(--radio); padding: 22px 24px;
}
.limite h3 { margin-bottom: 6px; }
.limite p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 0; }

/* ------------------------------------------------------------------ llamada */
.llamada {
    background: var(--azul); color: #fff; border-radius: var(--radio-lg);
    padding: 52px 44px; text-align: center;
}
.llamada h2 { color: #fff; }
.llamada p { color: #cfe0ee; max-width: 40em; margin-left: auto; margin-right: auto; }
.llamada__acciones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* --------------------------------------------------------------------- pie */
.pie { background: #0b2434; color: #9fb4c2; padding: 56px 0 26px; font-size: .92rem; }
.pie a { color: #cfe0ee; }
/* Cinco columnas desde que el pie lleva la seccion legal completa. La
   primera es mas ancha porque carga la marca y el parrafo descriptivo. */
.pie__rejilla { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.15fr 1fr; gap: 32px; }
.pie h4 { color: #fff; font-size: .88rem; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 14px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 9px; }
.pie__marca { color: #fff; font-size: 1.12rem; font-weight: 700; margin-bottom: 10px; }
.pie__legal {
    margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .86rem;
}

/* ------------------------------------------------------------------ celular */
@media (max-width: 980px) {
    .heroe__rejilla, .norma__rejilla { grid-template-columns: 1fr; gap: 36px; }
    .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
    .pie__rejilla { grid-template-columns: 1fr 1fr; }
    .cifras { grid-template-columns: 1fr 1fr; }
    .cifra:nth-child(2) { border-right: 0; }
    .cifra:nth-child(1), .cifra:nth-child(2) { border-bottom: 1px solid var(--linea); }
}
@media (max-width: 700px) {
    .nav { display: none; }
    .nav.abierto {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; top: 72px; left: 0; right: 0; background: #fff;
        border-bottom: 1px solid var(--linea); padding: 8px 24px 18px;
    }
    .nav.abierto a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
    .nav.abierto .boton { margin-top: 12px; }
    .nav-movil { display: block; }
    .seccion { padding: 56px 0; }
    .rejilla--3, .rejilla--4, .rejilla--2 { grid-template-columns: 1fr; }
    .cifras { grid-template-columns: 1fr; }
    .cifra { border-right: 0; border-bottom: 1px solid var(--linea); }
    .cifra:last-child { border-bottom: 0; }
    .llamada { padding: 40px 24px; }
    .pie__rejilla { grid-template-columns: 1fr; gap: 28px; }
}

@media print {
    .cabecera, .nav-movil, .llamada__acciones, .heroe__acciones { display: none; }
}

/* ------------------------------------------------------- panel de acceso */
/* Se despliega desde el botón de la cabecera. En pantalla chica ocupa todo el
   ancho, porque un panel flotante de 340 px en un celular queda mal puesto
   mire donde se mire. */
.acceso {
    position: absolute; top: 100%; right: 0; left: 0;
    display: flex; justify-content: flex-end;
    padding: 0 24px;
    pointer-events: none;               /* el fondo no intercepta clics */
}
.acceso[hidden] { display: none; }
.acceso__panel {
    pointer-events: auto;
    width: 360px; max-width: 100%;
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    box-shadow: 0 12px 40px rgba(13, 43, 62, .16);
    padding: 22px;
    animation: acceso-entra .16s ease-out;
}
@keyframes acceso-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.acceso__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acceso__cabeza h2 { font-size: 1.08rem; margin: 0 0 16px; }
.acceso__cerrar {
    background: none; border: 0; font-size: 1.5rem; line-height: 1;
    color: var(--tinta-suave); cursor: pointer; padding: 0 2px; margin-top: -4px;
}
.acceso__cerrar:hover { color: var(--tinta); }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }
.campo input {
    width: 100%; padding: 11px 13px; font-size: .97rem; font-family: inherit;
    color: var(--tinta); background: #fff;
    /* 3:1 contra el blanco: por debajo de eso el borde de un campo no se
       distingue, y quien tiene baja visión no ve dónde escribir. */
    border: 1px solid #75899b; border-radius: var(--radio);
}
.campo input:focus {
    outline: 0; border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(18, 85, 138, .16);
}
.acceso__enviar { width: 100%; margin-top: 4px; }
.acceso__enviar[disabled] { opacity: .65; cursor: progress; }

.acceso__error {
    background: #fdeceb; border: 1px solid #f3c6c3; color: #8a1f18;
    border-radius: var(--radio); padding: 10px 13px; font-size: .89rem; margin: 0 0 14px;
}
.acceso__error[hidden] { display: none; }

/* El aviso NO es un error: «su sesion termino por inactividad» no es culpa de
   nadie, y pintarlo de rojo hace sentir regañado a quien solo fue a comer.
   Mismo lugar, otro tono. */
.acceso__aviso {
    background: var(--ambar-tenue); border: 1px solid #f0dcb8; color: var(--ambar);
    border-radius: var(--radio); padding: 10px 13px; font-size: .89rem; margin: 0 0 14px;
}

.acceso__pie {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea);
    display: flex; flex-direction: column; gap: 6px;
    font-size: .85rem; color: var(--tinta-suave);
}

@media (max-width: 700px) {
    .acceso { padding: 0 16px; }
    .acceso__panel { width: 100%; }
}

/* ============================================================ IMÁGENES ==== */
/* Todas las fotos llevan width/height en el HTML y aspect-ratio aquí: así el
   navegador reserva el hueco antes de descargarlas y la página no brinca. */

/* -------------------------------------------------------- foto del héroe */
.heroe__medio { position: relative; }
.heroe__foto {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radio-lg);
    box-shadow: 0 10px 34px rgba(13, 43, 62, .16);
}
/* La tarjeta de resultado se monta sobre la esquina de la foto: la imagen
   pone la emoción y la tarjeta dice de qué va el producto. Juntas explican
   más que cualquiera de las dos sola. */
.muestra--sobre-foto {
    /* Abajo a la izquierda y ocupando dos tercios: la tarjeta tiene que
       apoyarse en la fotografía, no taparla. Antes iba al 78 % y a la derecha,
       y de la imagen solo quedaba una esquina asomándose. */
    position: absolute; left: -26px; bottom: -22px;
    width: 66%; padding: 16px;
    box-shadow: 0 16px 44px rgba(13, 43, 62, .22);
}
.muestra--sobre-foto .barra { margin-bottom: 11px; }
.muestra--sobre-foto .muestra__pie { display: none; }

/* ------------------------------------------------------ para quién es */
.publico {
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.publico:hover { border-color: #b9cfe2; box-shadow: var(--sombra); transform: translateY(-2px); }
.publico__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.publico__cuerpo { padding: 20px; }
.publico__cuerpo h3 { margin-bottom: 6px; }
.publico__cuerpo p { color: var(--tinta-suave); font-size: .93rem; margin: 0; }

/* ------------------------------------------------------------- NOM-035 */
.norma__foto {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radio-lg); margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, .22);
}

/* --------------------------------------------------------- testimonios */
.testimonio {
    margin: 0; background: #fff; border: 1px solid var(--linea);
    border-radius: var(--radio-lg); padding: 26px;
    display: flex; flex-direction: column;
}
.testimonio blockquote {
    margin: 0 0 20px; font-size: 1.02rem; color: var(--tinta); flex: 1 1 auto;
    line-height: 1.6;
}
.testimonio__firma { display: flex; align-items: center; gap: 12px; }
.testimonio__retrato {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.testimonio__firma b { display: block; font-size: .93rem; }
.testimonio__firma small { color: var(--tinta-suave); font-size: .84rem; }

@media (max-width: 980px) {
    /* En pantalla mediana la tarjeta encimada estorba más de lo que aporta. */
    .muestra--sobre-foto {
        position: static; width: 100%; margin-top: 16px;
        box-shadow: var(--sombra);
    }
    .muestra--sobre-foto .muestra__pie { display: block; }
}


/* ============================================================================
   TEXTO JUSTIFICADO
   ----------------------------------------------------------------------------
   Se justifica SOLO la prosa: los parrafos que se leen de corrido. Un titulo,
   una etiqueta de campo o el texto de un boton justificados se ven rotos,
   porque justificar reparte el espacio sobrante entre las palabras y con tres
   palabras ese sobrante es enorme.

   Van juntas dos cosas que casi nunca se ponen juntas:

     hyphens: auto  parte palabras al final del renglon. Sin esto, justificar
                    en español abre huecos blancos verticales -«rios»- porque
                    nuestras palabras son largas. El navegador solo sabe cortar
                    bien si la pagina declara lang="es", y las dos lo declaran.

     text-wrap: pretty  evita que el ultimo renglon quede con una sola palabra.
                    Donde no exista, simplemente se ignora.

   Y una condicion: por debajo de 700 px NO se justifica. En una columna
   angosta los huecos entre palabras se vuelven insoportables, y el telefono es
   justo donde mas se lee.
   ============================================================================ */

@media (min-width: 700px) {
    .heroe p.entrada,
    .heroe__nota,
    .seccion__cabeza p,
    .publico__cuerpo p,
    .muestra p,
    .limite p,
    .norma p,
    .paso p,
    /* Los parrafos de "Acerca de" se suman AQUI en vez de repetir el bloque
       mas abajo: si manana se cambia la forma de justificar, se cambia en un
       solo sitio. Las tarjetas de capacidad no entran: son de dos renglones y
       justificarlas solo abriria huecos. */
    .acerca__texto p,
    .acerca__desarrollo-texto p {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        text-wrap: pretty;
    }
}

/* El pie y las notas al margen no se justifican: son fragmentos cortos y
   quedarian con huecos. Se dice explicito para que no los alcance una regla
   mas general si manana se agrega. */
/* .acerca__entrada esta dentro de .seccion__cabeza, asi que la regla de arriba
   la justificaria. No debe: son dos renglones y el segundo va a media caja, de
   modo que el primero se estira y quedan huecos del ancho de una palabra. */
.pie p, .acceso p, .campo label, p.acerca__entrada { text-align: left; }


/* ============================================================================
   ACERCA DE HYBPEOPLE
   ----------------------------------------------------------------------------
   Reutiliza .seccion, .contenedor y .seccion__cabeza; lo de aqui abajo es solo
   lo que esas clases no cubren. No se redefine ninguna variable: los colores
   salen de :root, que es el mismo lugar del que salen los del resto del sitio.

   El naranja aparece en los iconos, en el filete del titulo y en la frase
   final. En los textos NO: sobre blanco da 3.02:1 y el minimo para leer es
   4.5:1. Donde hace falta naranja legible esta --naranja-texto.
   ============================================================================ */

.acerca__entrada {
    font-size: 1.14rem;
    color: var(--tinta);
    font-weight: 600;
    max-width: 30em;
}

/* Un filete corto arriba del titulo: es el acento de la marca sin invadir la
   lectura. */
.acerca .seccion__cabeza h2 { position: relative; padding-top: 18px; }
.acerca .seccion__cabeza h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: var(--naranja);
}

/* Los dos parrafos, uno por columna.

   No es adorno: a todo el ancho del contenedor un renglon pasa de los cien
   caracteres y el ojo pierde el salto de linea. Partido en dos quedan unos
   setenta, que es la medida en la que se lee comodo, y de paso el bloque ocupa
   el ancho en lugar de dejar media pagina vacia. */
.acerca__texto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 44px;
}
.acerca__texto p { color: var(--tinta-suave); margin-bottom: 0; }

/* Las capacidades usan .rejilla .rejilla--4, que ya existe y ya trae sus
   cortes -cuatro columnas, dos por debajo de 980 px y una por debajo de 700-.
   Aqui solo se quita lo que trae una lista y se separa del texto de arriba. */
.acerca__capacidades {
    list-style: none;
    margin: 42px 0 0;
    padding: 0;
}
.capacidad {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 24px;
}
.capacidad__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: var(--naranja-tenue);
    color: var(--naranja-texto);
}
.capacidad h3 { font-size: 1.02rem; margin: 0 0 6px; }
.capacidad p { color: var(--tinta-suave); font-size: .93rem; margin: 0; }

/* --------------------------------------------------------- quien lo hace */

.acerca__desarrollo {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 46px;
    padding: 34px;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
}
.acerca__logo img {
    width: 100%;
    max-width: 360px;
    height: auto;
}
.acerca__desarrollo-texto h3 { margin-bottom: 10px; }
.acerca__desarrollo-texto p { color: var(--tinta-suave); margin-bottom: 12px; }
.acerca__desarrollo-texto p:last-child { margin-bottom: 0; }
.acerca__desarrollo-texto strong { color: var(--tinta); }

/* ------------------------------------------------------------- la frase */

.acerca__frase {
    margin: 40px 0 0;
    padding: 26px 30px;
    border-left: 4px solid var(--naranja);
    background: var(--azul-tenue);
    border-radius: 0 var(--radio) var(--radio) 0;
}
.acerca__frase p {
    margin: 0;
    font-size: 1.14rem;
    font-weight: 600;
    color: var(--tinta);
    font-style: italic;
    text-align: left;
}

/* ------------------------------------------------------------ responsivo */

/* 980 px es el corte que ya usa el resto de la pagina para pasar de cuatro
   columnas a dos. Se respeta en vez de inventar otro, para que la seccion
   cambie de forma al mismo tiempo que las de arriba y no un poco antes. */
@media (max-width: 980px) {
    /* Al quedar en una sola columna el parrafo tomaria los 1140 px del
       contenedor: cerca de cien caracteres por renglon, y a esa medida el ojo
       se pierde al saltar de linea. 44em es el mismo tope que ya usa
       .seccion__cabeza en toda la pagina; se repite el numero y no se inventa
       otro para que las dos cosas cambien juntas. */
    .acerca__texto { grid-template-columns: 1fr; max-width: 44em; }
    .acerca__desarrollo { grid-template-columns: 1fr; gap: 26px; text-align: left; }
    /* El logotipo se centra cuando queda solo en su renglon; sin esto se
       quedaria pegado a la izquierda con mucho aire a la derecha. */
    .acerca__logo { display: flex; justify-content: center; }
}
@media (max-width: 700px) {
    .acerca__desarrollo { padding: 24px; }
    .acerca__frase { padding: 20px 22px; }
    .acerca__frase p { font-size: 1.04rem; }
}

/* ---------------------------------------------------- aparicion discreta */

/* Se mueve poco y una sola vez: 14 px y algo de opacidad. Una entrada que se
   nota es una entrada que estorba cuando uno vuelve a la pagina por decima vez.

   Sin JavaScript el bloque se ve normal, porque el estado inicial lo pone el
   propio JavaScript agregando .revela--armada. Si el archivo no carga, nadie
   se queda con la pagina en blanco. */
.revela--armada {
    opacity: 0;
    transform: translateY(14px);
}

/* La transicion va en OTRA clase, y no es un capricho.
   Si .revela--armada llevara el transition, el bloque nacería visible -que es
   su estado sin JavaScript- y al armarlo se veria DESVANECERSE antes de
   aparecer: un parpadeo al cargar la pagina. Medido: al entrar, la opacidad
   pasaba por 0.55. Armar primero y encender la transicion despues -con el
   navegador ya enterado de que el bloque esta en cero- deja la bajada
   instantanea y anima solo la subida, que es la que se quiere ver. */
.revela--anima {
    transition: opacity .5s ease, transform .5s ease;
}
.revela--visible {
    opacity: 1;
    transform: none;
}

/* Quien pidio menos animacion en su sistema no ve ninguna. No es un extra:
   para algunas personas el movimiento provoca mareo. */
@media (prefers-reduced-motion: reduce) {
    .revela--armada, .revela--anima, .revela--visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}