/* empresas.css — /empresas (022 · rediseño 2026-10-18: «más niña», el lenguaje de la página del Train the Trainer).
   Usa los tokens de .fn (sitio.css) y los dibujitos de fn-dibujos.css. Pares de color medidos en tests/contraste.py. */
.emp .fn-heroe h1 { text-transform: none; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 2.9rem); line-height: 1.15; }
.emp-enlace { color: var(--fn-turquesa-texto); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.emp-enlace:hover { color: var(--fn-naranja-texto); }
/* La foto del héroe también en el teléfono (en el TtT se oculta): arriba, más bajita. */
@media (max-width: 899px) {
  .emp .emp-foto { display: block; order: -1; margin: 0 auto 1.5rem; max-width: 320px; }
  .emp .emp-foto img { aspect-ratio: 4 / 3; box-shadow: 10px 10px 0 var(--fn-naranja); }
}
.emp-bajada { color: var(--fn-tinta-suave); max-width: 680px; margin-inline: auto; }

/* Cómo trabajamos: cuatro pasos de colores, con una línea punteada que los une. */
.emp-ciclo { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.emp-ciclo::before { content: ""; position: absolute; top: 2.9rem; left: 8%; right: 8%; border-top: 3px dashed var(--fn-amarillo); z-index: 0; }
.emp-ciclo li { position: relative; z-index: 1; text-align: center; padding-top: 1.5rem; }
.emp-ciclo .fn-num { margin: 0 auto .75rem; border-radius: 50%; }
.emp-ciclo li:nth-child(4n+1) .fn-num { background: var(--fn-boton); }
.emp-ciclo li:nth-child(4n+2) .fn-num { background: var(--fn-turquesa-fuerte); }
.emp-ciclo li:nth-child(4n+3) .fn-num { background: var(--fn-lima); color: var(--fn-marino); }
.emp-ciclo li:nth-child(4n) .fn-num { background: var(--fn-amarillo); color: var(--fn-marino); }
.emp-ciclo p { margin: 0; }
@media (max-width: 800px) { .emp-ciclo { grid-template-columns: 1fr 1fr; } .emp-ciclo::before { display: none; } }
.emp-polaroids { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .emp-polaroids { grid-template-columns: repeat(4, 1fr); } }

/* Qué nos hace diferentes: tarjetas de color con su estrellita. */
.emp-dif { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.emp-dif li { border-radius: 16px; padding: 1.25rem 1.25rem 1.25rem 3.4rem; position: relative; box-shadow: var(--fn-sombra);
  background: var(--fn-celeste); border-top: 4px solid var(--fn-turquesa); }
.emp-dif li:nth-child(3n+2) { background: var(--fn-durazno); border-top-color: var(--fn-naranja); }
.emp-dif li:nth-child(3n) { background: var(--fn-lima-suave); border-top-color: var(--fn-lima); }
.emp-dif li::before { content: ""; position: absolute; left: 1.1rem; top: 1.3rem; width: 1.5rem; height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.6 6.1 6.6.6-5 4.4 1.5 6.5L12 16.7l-5.7 3.4 1.5-6.5-5-4.4 6.6-.6z' fill='%23F3BF4B' stroke='%23FF651F' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.emp-dif h3 { margin-bottom: .3rem; }
.emp-dif p { margin: 0; }
@media (max-width: 900px) { .emp-dif { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .emp-dif { grid-template-columns: 1fr; } }

/* Qué gana tu empresa: lista + polaroid. */
.emp-gana { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.emp-gana h2 { margin-top: 0; }
.emp-gana-foto { margin: 0; max-width: 340px; justify-self: center; transform: rotate(3deg); }
.emp-frase { font-family: var(--fuente-titulo); font-weight: 800; color: var(--fn-naranja-texto); font-size: 1.2rem; margin: 1rem 0 0; }
@media (max-width: 760px) { .emp-gana { grid-template-columns: 1fr; } }

/* Programas: cada línea con su color (el título es una píldora; las tarjetas llevan el mismo color arriba). */
.emp-linea-bloque { margin-top: 2.25rem; --emp-c: var(--fn-turquesa); --emp-f: var(--fn-celeste); }
.emp-linea-bloque:nth-of-type(6n+2) { --emp-c: var(--fn-naranja); --emp-f: var(--fn-durazno); }
.emp-linea-bloque:nth-of-type(6n+3) { --emp-c: var(--fn-lima); --emp-f: var(--fn-lima-suave); }
.emp-linea-bloque:nth-of-type(6n+4) { --emp-c: var(--fn-amarillo); --emp-f: var(--fn-amarillo-tenue); }
.emp-linea-bloque:nth-of-type(6n+5) { --emp-c: var(--fn-turquesa-fuerte); --emp-f: var(--fn-celeste); }
.emp-linea-bloque:nth-of-type(6n) { --emp-c: var(--fn-boton); --emp-f: var(--fn-durazno); }
.emp-linea { margin: 0 0 1rem; font-size: 1.05rem; }
.emp-linea span { display: inline-block; background: var(--emp-f); border: 2px solid var(--emp-c); border-radius: 999px; padding: .35rem 1rem;
  color: var(--fn-marino); font-family: var(--fuente-titulo); font-weight: 800; }
.emp-tarjetas { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.emp-programa { display: flex; flex-direction: column; border-top: 6px solid var(--emp-c); border-radius: 16px; }
.emp-programa h4 { font-family: var(--fuente-titulo); color: var(--fn-marino); font-size: 1.2rem; margin: 0 0 .5rem; }
.emp-datos { list-style: none; padding: 0; margin: .25rem 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.emp-datos li { background: var(--emp-f); border-radius: 999px; padding: .3rem .8rem .3rem 2rem; font-size: .9rem; color: var(--fn-tinta);
  position: relative; }
.emp-datos li::before { content: ""; position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem;
  background: center / contain no-repeat; }
.emp-datos .emp-dato-duracion::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153651' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.emp-datos .emp-dato-formato::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153651' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14c3 0 5 2 5 5'/%3E%3C/svg%3E"); }
.emp-datos .emp-dato-modalidad::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153651' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.emp-programa .emp-enlace { margin-top: auto; }

/* El cotizador: como el formulario del TtT. */
.emp-formulario .campo input[type=number], .emp-formulario textarea { width: 100%; }
.emp-opciones { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.emp-opciones legend { font-weight: 700; margin-bottom: .35rem; padding: 0; }
.emp-opciones label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 400; }
.emp-opciones input { width: 22px; height: 22px; accent-color: var(--fn-marino); }

/* Historia (024): el mismo lenguaje. */
.hist-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hist-mision { background: var(--fn-durazno); border-top: 6px solid var(--fn-naranja); }
.hist-vision { background: var(--fn-lima-suave); border-top: 6px solid var(--fn-lima); }
.hist-vision .fn-rotulo { color: var(--fn-verde); }
.hist-dos p:last-child { margin: 0; font-size: 1.0625rem; }
@media (max-width: 760px) { .hist-dos { grid-template-columns: 1fr; } }
.hist-valores li:nth-child(7) { grid-column: 2; }
@media (max-width: 900px) { .hist-valores li:nth-child(7) { grid-column: auto; } }
.hist-filosofia { margin-top: clamp(3rem, 6vw, 5rem); }
.hist-filosofia .fn-rotulo { color: var(--fn-turquesa-texto); }
.hist-lema { margin: 0 0 1rem; }
.hist-texto { font-family: var(--fuente); font-weight: 400; font-size: 1.0625rem; color: var(--fn-tinta); margin: 0; }
.hist-compromiso-titulo { margin-top: 0; }
.fn-remate p.hist-compromiso { font-family: var(--fuente); font-weight: 400; font-size: 1.0625rem; color: var(--fn-tinta); max-width: 640px; margin-inline: auto; }
.fn-remate p.hist-botones { justify-content: center; margin-bottom: 0; }
.hist .fn-espejo .fn-cinta { margin-bottom: 1.25rem; }

/* Quién soy (diseño 2026-10-18). */
.qs-libro { display: grid; grid-template-columns: 220px 1fr; gap: 2.25rem; align-items: center; margin-top: 0; }
.qs-libro-foto { margin: 0; transform: rotate(-3deg); }
.qs-libro-foto img { aspect-ratio: auto; object-fit: contain; }
.qs-libro h2 { margin: 0 0 .4rem; }
.qs-sub { color: var(--fn-tinta-suave); }
@media (max-width: 700px) { .qs-libro { grid-template-columns: 1fr; text-align: center; } .qs-libro-foto { max-width: 200px; margin-inline: auto; } }
.qs-bars li { text-align: left; }
.qs-bars .bars-b .letra { background: var(--fn-boton); }
.qs-bars .bars-a .letra { background: var(--fn-amarillo); color: var(--fn-marino); }
.qs-bars .bars-r .letra { background: var(--fn-turquesa-fuerte); }
.qs-bars .bars-s .letra { background: var(--fn-marino); }
.qs-polaroids { grid-template-columns: repeat(3, 1fr); max-width: 820px; margin-inline: auto; }
@media (max-width: 600px) { .qs-polaroids { grid-template-columns: repeat(2, 1fr); } }
.qs .fn-ruta li > div h3 { margin: 0 0 .15rem; }
.fn-remate .redes-personales { font-family: var(--fuente); font-weight: 400; font-size: 1rem; color: var(--fn-tinta); margin: 1.25rem 0 0; }
/* En el teléfono la estrellita del título no cabe junto al borde: se le deja su espacio. */
@media (max-width: 600px) { .emp h1 .fn-subrayado, .emp h2 .fn-subrayado { margin-right: 1.1em; } }

/* Servicios (diseño 2026-10-18). Cada letra BARS con su color (las mismas de «Quién soy»). */
.srv-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 760px) { .srv-lista { grid-template-columns: 1fr; } }
.srv-tarjeta { display: flex; flex-direction: column; border-top: 6px solid var(--fn-turquesa); padding: 1.5rem; }
.srv-risa { border-top-color: var(--fn-naranja); background: linear-gradient(180deg, var(--fn-durazno), #fff 45%); }
.srv-formador { border-top-color: var(--fn-marino); background: linear-gradient(180deg, var(--fn-celeste), #fff 45%); }
.srv-ser { border-top-color: var(--fn-amarillo); background: linear-gradient(180deg, var(--fn-amarillo-tenue), #fff 45%); }
.srv-lider { border-top-color: var(--fn-lima); background: linear-gradient(180deg, var(--fn-lima-suave), #fff 45%); }
.srv-tarjeta h2 { font-size: 1.5rem; margin: .25rem 0 .5rem; }
.srv-tarjeta h2 a { color: var(--fn-marino); text-decoration: none; }
.srv-tarjeta h2 a:hover { text-decoration: underline; }
.srv-mas { margin-top: auto; }
.srv-letras { display: flex; gap: .4rem; margin: 0 0 .25rem; }
.srv-letra { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: #fff; font-family: var(--fuente-titulo);
  font-weight: 900; font-size: 1.2rem; text-transform: uppercase; }
.srv-letras-grande .srv-letra { width: 3rem; height: 3rem; font-size: 1.5rem; }
.srv-letra-b { background: var(--fn-boton); }
.srv-letra-a { background: var(--fn-amarillo); color: var(--fn-marino); }
.srv-letra-r { background: var(--fn-turquesa-fuerte); }
.srv-letra-s { background: var(--fn-marino); }
.srv-para { display: inline-block; background: var(--papel-azul); border-radius: 999px; padding: .35rem .9rem; font-size: .95rem; color: var(--fn-tinta); }
.srv .fn-heroe .srv-letras { justify-content: flex-start; }
@media (max-width: 899px) { .srv .fn-heroe .srv-letras { justify-content: center; } }
.srv-eventos { list-style: none; padding: 0; }
.srv-para::before { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-right: .4rem; vertical-align: -.15rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153651' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14c3 0 5 2 5 5'/%3E%3C/svg%3E") center / contain no-repeat; }