/* Lo propio de la portada, antes del cromo.
   Trasladado de la maqueta aprobada (portada-con-servicios.html) por
   herramientas/trasladar-portada.mjs. No se edita a mano: se cambia la maqueta
   y se vuelve a trasladar. */
:root{--f-mono:'Chivo Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ══ EL BLOQUE DE SERVICIOS ═════════════════════════════════════════════
   Lleva el fondo de tiras, así que tiene que ser el ancestro posicionado.
   Las tiras venían colgadas de la sección, que va a sangre; dentro del
   bloque quedarían metidas por el margen de página, así que se lo devuelvo
   con el propio token: a sangre en escritorio y en teléfono. */
/* La banda respira con --e-6, el mismo token con el que la portada separa
   sus secciones. No es solo para que la fotografía se vea más alta —que es
   lo pedido—: medido, la cejilla arrancaba a 15 px del canto superior de las
   tiras, o sea pegada, mientras abajo sobraban 70. Con el mismo aire en los
   dos cantos la banda queda centrada sobre su contenido, y pasa de 337 a
   unos 545 px. */
.ep-serv{position:relative;margin:0;padding:var(--e-6) 0}
.ep-serv > .ep-tiras{inset:0 calc(var(--pad-pagina) * -1)}
/* La cejilla no se vuelve a escribir: viene dentro de la cabecera rescatada
   —.ep-motivos__cejilla, con su regla de la portada— y solo le cambia la
   palabra. Por eso aquí no hay ningún .ep-serv__cejilla: había uno y se
   retiró al traer la cabecera entera, para no rotular dos veces lo mismo. */

/* ══ CABECERA A DOS COLUMNAS ════════════════════════════════════════════
   Izquierda: la cabecera original de Motivos, sin tocar —cejilla y titular
   a dos tonos—. Derecha: el motivo que rota, pequeño: ícono, nombre y
   descripción. Debajo de las dos, las tres líneas.
   El titular manda porque es el que no cambia; el motivo acompaña.
   Las dos columnas se alinean por ABAJO —align-items:end—, así el motivo
   se apoya en el mismo canto inferior que el titular en vez de flotar en
   mitad de la banda. Es lo que pidió el Director el 17-09. */
.ep-cab2{display:grid;gap:var(--e-4);margin:0 0 var(--e-6)}
@media (min-width:900px){
  .ep-cab2{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:var(--e-5);align-items:end}
}
.ep-cab2 .ep-motivos__cab{margin:0}

/* ══ EL MOTIVO QUE ROTA ═════════════════════════════════════════════════
   Pequeño a propósito: ícono de 28, nombre a --txt-l y descripción a
   --txt-s. Al lado de un titular de 52 px no puede competir, y tampoco debe:
   lo que no cambia es lo que ancla la sección.
   El ícono va AL LADO del nombre, no encima: dos columnas —28 px y el
   resto—, con las celdas puestas a mano para que la descripción arranque
   bajo el nombre y no bajo el ícono.
   Por omisión se ven los seis, uno debajo de otro — el carrusel lo enciende
   el guion con data-carrusel, así que si el guion no corre no se esconde
   nada (regla 3 de LEEME.md). */
/* Los mandos vuelven DEBAJO del motivo, pero colgados: en posición
   absoluta bajo la caja, para que no cuenten en su alto. Si contaran,
   serían ellos —y no el texto— los que se apoyarían en el canto inferior
   de la cabecera, y el motivo subiría 52 px. Así el texto queda alineado
   y los mandos caen en el aire que ya había hasta las tres líneas
   —medido, 104 px; los mandos ocupan 44—. */
.ep-mline{margin:0;position:relative}
.ep-mline__lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-3)}
/* El ícono va a 40, que es el lienzo con el que están dibujados los seis
   —viewBox 0 0 40 40—. A 28 se reducían a 0.7 y el trazo de 1.75 caía en
   1.22 px, que ningún monitor dibuja entero: de ahí que se vieran
   lavados. A tamaño natural el trazo es el que el dibujo tiene. */
.ep-mline__i{display:grid;grid-template-columns:40px minmax(0,1fr);
  column-gap:var(--e-2);align-content:start}
.ep-mline__ico{grid-column:1;grid-row:1;align-self:center;color:var(--acento);
  display:block;width:40px;height:40px}
.ep-mline__ico svg{display:block;width:40px;height:40px}
.ep-mline__n{grid-column:2;grid-row:1;align-self:center;margin:0;
  font-size:var(--txt-l);line-height:1.25;letter-spacing:-.01em;font-weight:700}
/* --gris-fuerte y no --gris: medido sobre los píxeles de letra reales de
   la banda, --gris daba 4.37 contra el 4.5 que exige la norma para texto
   pequeño. Con --gris-fuerte sube a 5.9. */
.ep-mline__t{grid-column:2;grid-row:2;margin:var(--e-1) 0 0;
  font-size:var(--txt-s);line-height:1.55;color:var(--gris-fuerte)}

/* modo carrusel */
/* Los seis se apilan en la misma celda, así que el alto de la caja es el
   del motivo más largo y no cambia al rotar: no hace falta fijarlo a mano.
   Medido, 128 px con el ícono al lado. */
.ep-mline__lista[data-carrusel]{gap:0}
.ep-mline__lista[data-carrusel] .ep-mline__i{grid-area:1/1;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.ep-mline__lista[data-carrusel] .ep-mline__i[data-viva]{opacity:1}
/* EL PRIMER FOTOGRAMA · 21-09 (REGLAS-DEL-SITIO §6.1.quaterdecies). Hasta que
   el guion arranca el carrusel, los seis motivos se pintaban una debajo de otra; y al
   arrancar, las que no tocaban se desvanecían desde opacidad 1. Con la marca
   data-js, que pone una línea del <head> antes de la primera pintura, sólo se
   dibuja la primera hasta el arranque. Sin guion o con «movimiento reducido»
   se siguen viendo todas. */
@media (prefers-reduced-motion:no-preference){
  html[data-js] .ep-mline__lista:not([data-carrusel]) .ep-mline__i:not(:first-child){display:none}
}

/* Los mandos: mismas medidas y mismo comportamiento que los del titular
   rotativo de la portada — 28 × 28 px, filete de 16 px, acento en el activo. */
.ep-mline__pie{position:absolute;top:100%;right:0;margin-top:var(--e-2);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--e-1);min-height:28px}
.ep-mline__mandos{display:flex;align-items:center;gap:2px}
.ep-mline__indices{display:flex;gap:2px}
.ep-mline__indices[hidden],.ep-mline__pausa[hidden]{display:none}
.ep-mline__indices button{width:28px;height:28px;padding:0;cursor:pointer;font:inherit;
  background:transparent;border:0;display:grid;place-items:center}
.ep-mline__indices button::before{content:"";width:16px;height:0;
  border-top:2px solid var(--marca-inactiva);transition:border-color .25s}
.ep-mline__indices button:hover::before{border-top-color:var(--tinta)}
.ep-mline__indices button[aria-current=true]::before{border-top:3px solid var(--acento)}
.ep-mline__pausa{width:28px;height:28px;cursor:pointer;font:inherit;font-size:var(--mono);
  background:transparent;border:var(--borde) solid var(--marca-inactiva);color:var(--gris);
  border-radius:2px;display:grid;place-items:center;margin-right:var(--e-1);
  transition:border-color .2s,color .2s}
.ep-mline__pausa:hover{border-color:var(--tinta);color:var(--tinta)}

/* ══ LAS TRES LÍNEAS ════════════════════════════════════════════════════ */
.ep-lineas{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);row-gap:var(--e-4)}
@media (min-width:780px){
  .ep-lineas{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--e-4)}
}
/* El filete de arriba entra en el mismo mecanismo que el titulo: el nombre
   pasa de azul a tinta y el filete, de tinta al naranja de marca. Responde a
   la tarjeta entera, como todo lo demas de la linea.
   Va en --marca-naranja y no en un token de acento porque el acento cambia
   de color con el tema —azul en claro, naranja en oscuro—: fijandolo, el
   gesto es el mismo en los dos. */
.ep-linea{position:relative;display:flex;flex-direction:column;
  padding-top:var(--e-2);border-top:2px solid var(--tinta);
  transition:border-color .2s}
/* RETIRADA (Tarea 7, pendiente 2): aquí había .ep-linea:hover{border-top-color:
   var(--marca-naranja)}, el gesto del filete que pasa de tinta a naranja. Estaba
   MUERTA: el bloque de «LAS TARJETAS», más abajo, deja border-top:0 (el filete
   ahora lo dibuja .ep-linea::before) y un borde de 0 px no se ve aunque cambie
   de color; y la transition:border-color de arriba la pisa la de .ep-linea de
   ese mismo bloque. Es anterior a la Tarea 6. Quitarla no cambia ningún valor
   medido: bloque 'tarjetas' en verde antes y después
   (docs/superpowers/mediciones/2026-10-02-tarea-7-flecha-del-hero.md, «Pendientes»). */
.ep-linea__pie{margin-top:auto}
.ep-linea__n{font-family:var(--f-mono);font-size:var(--mono);letter-spacing:.14em;
  color:var(--acento-fuerte);font-weight:700;line-height:1}
.ep-linea h3{margin:var(--e-1) 0 0;font-size:var(--tit-m);line-height:1.06;
  letter-spacing:-.03em;font-weight:800;text-wrap:balance}
/* El título de la tarjeta ya NO es un enlace, y su nombre accesible ya no lo
   da él. Decisión del Director del 29-09: solo el botón es pulsable. El «Ver
   más» es ahora el enlace (un «a» con href), y su nombre accesible es «Ver más
   sobre {nombre de la línea}» —el nombre completo, tomado del propio título,
   no inventado—, distinto en los tres, así que el sitio no tiene tres
   enlaces llamados igual (SC 2.4.4). Antes era al revés: el título era el
   enlace y el «Ver más» un span decorativo.
   El azul es --azul-texto, el mismo token con el que la portada escribe
   enlaces sobre fondo claro; a 34 px y en negrita es texto grande, que la
   norma mide contra 3:1. Va ahora en el h3 y no en un <a> de dentro, y se
   mantiene el gesto que ya tenía: el nombre nace en azul y pasa a tinta
   cuando la tarjeta tiene el cursor encima (en la demostración aprobada,
   .ep-linea:hover h3 a). Medido contra la demostración el 02-10-2026
   (docs/superpowers/mediciones/2026-10-02-tarea-6-tarjetas.md, medida 5):
   el <a> del título es azul en reposo y tinta con el cursor, en los dos
   temas; «.ep-linea h3» por sí solo da tinta en la demostración porque el
   color lo llevaba el <a> de dentro, y por eso el bloque 'tarjetas' declara
   esa diferencia en medidas.mjs en vez de copiar el valor del h3. */
/* ASIMETRÍA, A PROPÓSITO: el título pasa a tinta solo con el cursor, no con el
   foco de teclado. Todo lo demás de la tarjeta (sombra, fondo, elevación,
   botón) responde a :hover y también a :has(.ep-linea__ver:focus-visible);
   el color del título, no: con el teclado se queda azul. Es fiel a la
   demostración aprobada, cuya regla es solo .ep-linea:hover h3 a. Medido
   (tarjetas.mjs, informe de la Tarea 6): con el foco, el título azul sobre el
   fondo elevado da 4,78:1 en claro y 4,62:1 en oscuro, texto grande (mínimo 3),
   frente a 17,17 y 12,55 con el cursor. Cumple; no se cambia sin decisión. */
.ep-linea h3{color:var(--azul-texto);transition:color .2s}
.ep-linea:hover h3{color:var(--tinta)}
.ep-linea__frase{margin:var(--e-1) 0 0;font-size:var(--txt-l);line-height:1.35;
  letter-spacing:-.01em;color:var(--tinta);font-weight:600;text-wrap:balance}
.ep-linea__prueba{margin:var(--e-2) 0 0;padding-top:var(--e-2);
  border-top:var(--borde) solid var(--linea);
  font-family:var(--f-mono);font-size:var(--txt-s);letter-spacing:.02em;
  color:var(--gris-fuerte);line-height:1.6}
/* El «Ver más» es un botón (píldora azul sólida, 44 px): TODO su aspecto —tipo
   de letra, color, relleno, esquina, fondo, transición— lo escribe el último
   bloque de estilos, el que llega a portada-ajustes.css (sección «LAS
   TARJETAS»). Aquí solo queda lo que ese bloque no repite: el margen de arriba
   de cuando las tarjetas se apilan (<780 px, sin subrejilla). Antes había
   aquí una letra mono de 11 px en mayúsculas y un color elegido por contraste
   (--acento-fuerte, porque --azul-texto daba entre 3,62 y 3,83 a 11 px sobre
   la banda: cifra de un borrador del 22-09, no de la maqueta de hoy, y que se
   conserva solo en BORRADORES/sin-uso-22-09/docs/diseno/_borradores/
   gen-portada-servicios-aa.mjs, línea 299; no se ha vuelto a medir). Ya no se
   pinta nada de eso, así que esa cifra es HISTORIA y no describe nada de lo que
   hay en pantalla: lo que rige hoy es el botón de abajo, medido en
   docs/superpowers/mediciones/2026-10-02-tarea-6-tarjetas.md. */
.ep-linea__ver{margin-top:var(--e-2)}
/* ══ UNA SOLA FLECHA EN LOS BOTONES · Director, 08-10-2026 ════════════════
   Vio que unos botones llevaban una flecha larga dibujada, otros un carácter
   «→» y la mayoría ninguna. Se probó a quitarlas todas y prefirió lo
   contrario: que los que ya llevaban flecha lleven TODOS la del botón
   «Volver» de Privacidad —un ángulo—, mirando a la derecha y detrás del
   texto. Va a la altura de la letra (1em), y se corre 3 px al pasar el
   cursor o al llegar con el teclado, como ya hacían las de Ejecución de
   proyectos. Con la flecha fina al botón le sobraba aire: el relleno baja de --e-4 a --e-3.
   Los botones que no llevaban flecha siguen sin ella. */
.ep-linea__ver svg{width:1em;height:1em;flex:none;transition:transform .2s}
.ep-linea__ver:hover svg,.ep-linea__ver:focus-visible svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.ep-linea__ver svg{transition:none}}

/* ══ EL PANEL DE MENÚ · UNA LÍNEA, NO DOS ══════════════════════════════
   Encargo del Director, 17-09. Heredado de la portada, el panel dibujaba
   dos filetes paralelos a 40 px uno del otro: el border-bottom de
   .ep-menu__top y, justo debajo, el border-top del primer renglón de la
   navegación. Medido a 1440: el de arriba en y=129, el de abajo en y=169.
   Dos reglas para un solo corte, con un vacío entre ellas.
   Se retira la de .ep-menu__top —la lista ya trae la suya— y se acortan
   los dos aires, así que el menú entero sube 33 px. Va como capa encima:
   d2-portada-limpia.html no se toca. */
.ep-menu__top{border-bottom:0;padding-bottom:var(--e-3)}
/* La lista lleva los dos selectores porque el heredado que manda no es
   .ep-menu__cuerpo a secas, sino [data-menu=lateral] .ep-menu__cuerpo:
   atributo más clase, 0-2-0, y le gana a una clase sola por mucho que
   vaya después. Medido: sin esta segunda mitad el aire seguía en 40 px. */
.ep-menu__cuerpo,[data-menu=lateral] .ep-menu__cuerpo{padding-top:var(--e-3)}

/* ══ EL LOGOTIPO DEL PIE, A SU TAMAÑO ══════════════════════════════════
   Pregunta del Director, 17-09: «me parece que es muy pequeño el logo».
   Medidas de las tres instancias de la pagina: barra 176×48, panel de menú
   161×44, pie 125×34. El pie tenía la MAS PEQUENA, y está al revés de lo
   que hace cada una: en la barra el logotipo es un control que compite con
   los enlaces y con el botón de acción; en el pie es el sujeto de su propia
   columna —305 px— y no compite con nada.

   El argumento que cierra la discusion no es de composición sino de
   legibilidad: la línea «& Consulting» es un quinto del alto de la marca,
   o sea unos 6 px a 34. A 56 pasa de 6 a 11, que ya se lee.

   Va a 56: por encima de la barra, porque una firma de cierre puede ser la
   instancia mayor, y por debajo de 64, donde empieza a empujar al lema.
   **No cuesta alto**: el pie mide 469 px con 34, con 44, con 56 y con 64,
   porque la columna de marca no es la más alta de las cuatro.

   Va como capa encima, igual que el panel de menú: d2-portada-limpia.html
   no se toca. Es el SEGUNDO arreglo heredado duplicado en los dos guiones. */
.ep-pie__logo svg{height:56px}


/* ══ LA FRANJA DE CIFRAS · FUERA EL FILETE CONTINUO ════════════════════
   Encargo del Director, 17-09. Bajo los botones del hero había una regla
   gris de lado a lado y, 17 px por debajo, los cuatro filetes azules de
   las cifras. Dos trazos para marcar el mismo arranque. Se queda el que
   pertenece al dato —el filete de acento, que es firma del diseño— y sale
   el continuo. Con él se va su aire: la separación con los botones la
   sigue dando el gap de la rejilla del hero, que son 40 px. */
.ep-datos{border-top:0;padding-top:0}
/* SIN GUION, LAS CIFRAS SE VEN · auditoría del 02-10, G-A. La hoja heredada
   esconde cada cifra (opacity:0 y 12 px más abajo) hasta que el guion la marca
   con data-dentro al entrar en pantalla; sin guion nunca llegaba esa marca y la
   franja de «6 Años de operación», «30+ Clientes atendidos» y «4 Sectores»
   quedaba como un hueco de unos 110 px, omitiendo datos oficiales. data-js lo
   pone una línea del <head> antes de la primera pintura (ver más abajo), así
   que con guion no cambia nada: las cifras siguen entrando igual. */
html:not([data-js]) .ep-dato{opacity:1;transform:none}

/* Tres pistas IGUALES, no cuatro desiguales. La heredada es
   «.8fr .8fr 1.2fr 1.2fr»: con el RNP fuera, la cuarta se quedaba vacía y
   las tres cifras se apretaban contra el margen. El primer arreglo repartió
   el sobrante a la columna larga —.8fr .8fr 1.6fr— y el Director lo corrigió
   el 17-09: **el filete de cada cifra es el ancho de su pista**, así que
   pistas desiguales dibujan tres rayas de largo distinto encima de tres
   cosas del mismo rango. Con repeat(3,1fr) las tres rayas miden lo mismo.
   El precio lo paga el rótulo más largo —«Sectores: energía,
   telecomunicaciones, construcción e industria»—, que gana un renglón.
   Debajo de 900 mandan los medios heredados, que ya reparten en dos. */
@media (min-width:900px){
  .ep-datos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* LA FOTOGRAFÍA DEL HERO ACABA A RAS DE LAS CIFRAS · Director, 12-10-2026, sobre un borrador
   (residuo/BORRADORES/portada-foto-y-cifras.html), «lo mismo para la portada» que en Capacitación.
   La lámina mide según el alto de la ventana (74vh) y las cifras según su texto, así que el pie de
   unas y de otra no coincidían: a 1905 las cifras acababan 44 px antes que la fotografía; a 1100,
   era la fotografía la que acababa 49 px antes. Ahora las cifras se apoyan en el pie de su fila, la
   lámina apoya su contenido abajo, y los mandos del carrusel salen del flujo y cuelgan bajo la
   fotografía, dentro del aire que el hero ya tenía debajo. Sólo por encima de 1000 px, que es
   donde la lámina va al lado de las cifras. */
@media (min-width:1001px){
  .ep-datos{align-self:end}
  .ep-lamina{position:relative;justify-content:flex-end}
  .ep-lamina__pie{position:absolute;top:100%;left:0;right:0;margin-top:var(--e-1)}
}