/* ==========================================================================
   ALLIANCE — Páginas internas. Comparten el sistema de la portada; aquí solo
   van los componentes que la portada no usa.
   ========================================================================== */

/* ==================================================== CABECERA DE PÁGINA */
.cab{
  position:relative;overflow:hidden;background:var(--grafito-800);
  padding:clamp(150px,18vw,220px) 0 clamp(56px,7vw,96px);
  border-bottom:1px solid var(--linea);
}
/* Capas de la cabecera: imagen → velo → trama → contenido.
   El velo hunde el lado izquierdo para que el titular tenga contraste real
   sobre cualquier fondo. */
.cab__fondo{position:absolute;inset:0;z-index:0}
.cab__fondo img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.cab__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,var(--grafito-800) 0%,rgba(18,20,23,.95) 30%,rgba(18,20,23,.62) 64%,rgba(18,20,23,.42) 100%),
    linear-gradient(to top,var(--grafito-800) 0%,transparent 48%);
}
.cab__trama{
  position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:calc(100%/12) 100%;
}
/* Barra de acento anclada al borde inferior: la firma gráfica del sistema */
.cab::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:clamp(120px,20vw,300px);background:var(--rojo);z-index:2}
.cab .env{position:relative;z-index:2}
.cab h1{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,5.6vw,4.75rem);line-height:1.02;letter-spacing:-.02em;margin-block:var(--e-3);max-width:18ch;text-wrap:balance}
.cab h1 em{font-style:italic;color:var(--rojo-alto)}
.cab p{font-size:var(--t-lead);color:var(--texto-2);max-width:56ch}

.miga{display:flex;flex-wrap:wrap;gap:var(--e-1);align-items:center;margin-top:var(--e-5);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.miga a{display:inline-block;padding-block:6px;min-height:24px;transition:color 140ms var(--curva)}
.miga a:hover{color:var(--rojo-alto)}
.miga i{font-style:normal;color:var(--rojo)}

/* ========================================================= BLOQUE EDITORIAL */
.editorial{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,96px);align-items:start}
.editorial__txt p+p{margin-top:var(--e-3)}
.editorial__txt p{color:var(--texto-2);font-size:1.0625rem}
.editorial h2{font-family:var(--display);font-weight:400;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.editorial h2 em{font-style:italic;color:var(--texto-2)}

/* ============================================================== TARJETAS */
.malla{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--e-6);border-top:1px solid var(--linea-fuerte)}
.ficha{padding:var(--e-5) var(--e-3) var(--e-4);border-left:1px solid var(--linea);border-bottom:1px solid var(--linea);position:relative;transition:background-color var(--ms) var(--curva)}
.ficha:hover{background:var(--grafito-800)}
.ficha__n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.22em;color:var(--rojo-alto)}
.ficha h3{font-family:var(--display);font-weight:400;font-size:var(--t-h3);line-height:1.12;margin-block:var(--e-2) var(--e-2)}
.ficha p{font-size:var(--t-peq);color:var(--texto-2)}
.malla .ficha:nth-child(3n+1){border-left:0;padding-left:0}

/* =============================================================== ACORDEÓN */
.programa{max-width:900px;margin-top:var(--e-6);border-top:1px solid var(--linea-fuerte)}
.modulo{border-bottom:1px solid var(--linea)}
.modulo__cab{display:flex;align-items:center;gap:var(--e-3);width:100%;min-height:72px;padding:var(--e-3) 0;text-align:left;transition:color 140ms var(--curva)}
.modulo__cab:hover{color:var(--rojo-alto)}
.modulo__n{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;color:var(--rojo-alto);min-width:3ch}
.modulo__t{flex:1;font-family:var(--display);font-size:1.25rem;font-weight:400}
.modulo__mas{position:relative;width:22px;height:22px;flex:none}
.modulo__mas::before,.modulo__mas::after{content:"";position:absolute;background:var(--rojo-alto);transition:transform var(--ms) var(--curva)}
.modulo__mas::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
.modulo__mas::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.modulo[open] .modulo__mas::after{transform:translateX(-50%) scaleY(0)}
.modulo__cuerpo{padding:0 0 var(--e-4) calc(3ch + var(--e-3));color:var(--texto-2);font-size:var(--t-peq);max-width:70ch}
.modulo summary{list-style:none;cursor:pointer}
.modulo summary::-webkit-details-marker{display:none}

/* ================================================================ VACANTES */
.vacantes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:var(--e-6)}
.vacante{position:relative;display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-4);background:var(--grafito-800);border:1px solid var(--linea);transition:border-color var(--ms) var(--curva),background-color var(--ms) var(--curva)}
.vacante::before{content:"";position:absolute;top:-1px;left:-1px;height:2px;width:0;background:var(--rojo);transition:width var(--ms-lento) var(--curva)}
.vacante:hover,.vacante:focus-within{border-color:var(--linea-fuerte);background:var(--grafito-700)}
.vacante:hover::before,.vacante:focus-within::before{width:calc(100% + 2px)}
.vacante__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--e-2);min-width:0}
.vacante__top>*{min-width:0}
.vacante h3{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.1}
.vacante__tag{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--rojo-alto);border:1px solid currentColor;padding:5px 10px}
.vacante__meta{display:flex;flex-wrap:wrap;gap:4px var(--e-3);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);min-width:0}
.vacante p{font-size:var(--t-peq);color:var(--texto-2);flex:1}
.vacante .btn{align-self:flex-start;margin-top:var(--e-1)}

/* ============================================================ FORMULARIOS */
.form-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,96px);align-items:start}
.contacto-lista{display:grid;gap:0;margin-top:var(--e-5);border-top:1px solid var(--linea)}
.contacto-item{display:flex;gap:var(--e-3);align-items:flex-start;padding-block:var(--e-3);border-bottom:1px solid var(--linea);min-width:0}
.contacto-item>*{min-width:0}
.contacto-item__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--linea-fuerte);color:var(--rojo-alto)}
.contacto-item__ico svg{width:18px;height:18px}
.contacto-item h3{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);margin-bottom:4px}
.contacto-item a,.contacto-item p{font-size:1.0625rem;color:var(--texto);overflow-wrap:anywhere}
.contacto-item a{display:inline-block;padding-block:4px;min-height:24px;transition:color 140ms var(--curva)}
.contacto-item a:hover{color:var(--rojo-alto)}

.formulario{background:var(--grafito-800);border:1px solid var(--linea);padding:clamp(24px,4vw,var(--e-6))}
.campo{margin-bottom:var(--e-3)}
.campo label{display:block;margin-bottom:var(--e-1);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.campo .req{color:var(--rojo-alto)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:52px;padding:14px var(--e-2);
  background:var(--grafito-900);border:1px solid var(--linea);color:var(--texto);
  font-family:var(--sans);font-size:1rem;
  transition:border-color 140ms var(--curva),box-shadow 140ms var(--curva);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--linea-fuerte)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--rojo-alto);box-shadow:inset 0 0 0 1px var(--rojo-alto)}
.campo textarea{resize:vertical;min-height:150px}
.campo--doble{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2)}
.campo input[type=file]{padding:12px;cursor:pointer}
.form-msg{display:none;margin-bottom:var(--e-3);padding:var(--e-2);border-left:2px solid;font-size:var(--t-peq)}
.form-msg.ok{display:block;background:rgba(30,120,60,.12);color:#7EE2A8;border-color:#7EE2A8}
.form-msg.error{display:block;background:rgba(226,35,26,.10);color:#FF8A82;border-color:var(--rojo)}
.form-nota{margin-top:var(--e-2);font-family:var(--mono);font-size:var(--t-micro);color:var(--texto-3);text-align:center}
.hp{position:absolute;left:-9999px}

/* ============================================================== CONSENTIM. */
.consentimiento{margin:var(--e-4) 0 var(--e-1)}
.consentimiento h3{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--texto-3);margin-bottom:var(--e-2)}
.consentimiento__txt{max-height:150px;overflow-y:auto;background:var(--grafito-900);border:1px solid var(--linea);padding:var(--e-2);font-size:.875rem;color:var(--texto-3);line-height:1.65}
.check{display:flex;gap:var(--e-2);align-items:flex-start;margin:var(--e-2) 0 var(--e-3);min-height:44px;font-size:var(--t-peq);cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--rojo)}

/* ================================================================== MODAL */
.modal{position:fixed;inset:0;z-index:2000;display:none}
.modal[open],.modal.abierto{display:block}
.modal__velo{position:absolute;inset:0;background:rgba(6,7,9,.82);backdrop-filter:blur(6px)}
.modal__caja{position:relative;max-width:880px;margin:4vh auto;max-height:92vh;overflow-y:auto;background:var(--grafito-800);border:1px solid var(--linea)}
.modal__cerrar{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;display:grid;place-items:center;font-size:1.4rem;color:var(--texto-2);border:1px solid var(--linea);transition:background-color var(--ms) var(--curva),color var(--ms) var(--curva)}
.modal__cerrar:hover{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.modal__cab{padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--linea)}
.modal__cab h2{font-family:var(--display);font-weight:400;font-size:1.75rem}
.modal__cuerpo{padding:var(--e-5)}
.modal__exito{text-align:center;padding:var(--e-6) var(--e-3)}
.modal__exito .ico{width:64px;height:64px;margin:0 auto var(--e-3);display:grid;place-items:center;border:1px solid #7EE2A8;color:#7EE2A8;font-size:1.8rem}

/* ================================================================== CIERRE */
.cierre{position:relative;overflow:hidden;text-align:center;background:var(--grafito-800);border-top:1px solid var(--linea)}
.cierre__trama{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:calc(100%/12) 100%}
.cierre .env{position:relative;z-index:2}
.cierre .titulo{max-width:20ch;margin-inline:auto}
.cierre .lead{margin-inline:auto;margin-top:var(--e-3)}
.cierre__acciones{display:flex;gap:var(--e-2);justify-content:center;flex-wrap:wrap;margin-top:var(--e-5)}

/* ================================================================== MAPA */
.mapa{margin-top:var(--e-5);border:1px solid var(--linea);overflow:hidden}
.mapa iframe{width:100%;height:340px;border:0;display:block;filter:grayscale(1) invert(.92) contrast(.85)}

/* ============================================================= RESPONSIVE */
@media(max-width:1024px){
  .editorial,.form-grid{grid-template-columns:1fr}
  .malla{grid-template-columns:repeat(2,1fr)}
  .malla .ficha:nth-child(3n+1){border-left:1px solid var(--linea);padding-left:var(--e-3)}
  .malla .ficha:nth-child(2n+1){border-left:0;padding-left:0}
  .vacantes{grid-template-columns:1fr}
}
@media(max-width:640px){
  .malla{grid-template-columns:1fr}
  .malla .ficha{border-left:0;padding-left:0}
  .campo--doble{grid-template-columns:1fr}
  .modal__caja{margin:0;min-height:100vh;max-height:none}
  .modal__cab,.modal__cuerpo{padding:var(--e-3)}
}


/* ==================================================== CLIENTE INCÓGNITO */
/* Foto dentro de una ficha. Hereda el marco de .asesor__foto, que era el UNICO
   patron fotografico que tenia el sitio: fondo grafito, filete de un pixel y
   recorte por cover. Sin filtros de saturacion: las fotos ya vienen en la
   clave fria del sistema desde el origen. */
.ficha__foto{position:relative;aspect-ratio:3/2;overflow:hidden;
  margin-bottom:var(--e-3);background:var(--grafito-700);border:1px solid var(--linea)}
.ficha__foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Iguala el ancho de la foto entre columnas. La primera ficha de cada fila no
   lleva relleno a la izquierda (asi su texto alinea con el margen editorial),
   de modo que su foto seria 24px mas ancha y, con proporcion fija, mas alta:
   los numeros 01/02/03 quedaban a distinta altura. Se le devuelve ese ancho
   por la derecha, que no toca la alineacion del texto. */
.malla .ficha:nth-child(3n+1) .ficha__foto{margin-right:var(--e-3)}
/* Los puntos de corte van DESPUES de la regla base a proposito: misma
   especificidad, asi que manda el orden. Puestos antes, la base los pisaba. */
@media(max-width:1024px){
  .malla .ficha:nth-child(3n+1) .ficha__foto{margin-right:0}
  .malla .ficha:nth-child(2n+1) .ficha__foto{margin-right:var(--e-3)}
}
@media(max-width:640px){
  /* Se repiten los dos :nth-child en vez de usar un selector corto: aquel
     pesaria (0,3,0) y el de 1024px pesa (0,4,0), asi que le ganaria por
     especificidad aunque vaya despues. */
  .malla .ficha:nth-child(2n+1) .ficha__foto,
  .malla .ficha:nth-child(3n+1) .ficha__foto{margin-right:0}
}

/* Los <ul> del sistema van sin viñeta (sistema.css), así que dentro de un
   módulo una enumeración se leería como un párrafo corrido. Se repone una
   marca corta en rojo, del mismo grosor que los filetes del sistema. */
.chequeo{display:grid;gap:6px;margin-top:var(--e-2)}
.chequeo li{position:relative;padding-left:var(--e-3)}
.chequeo li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--rojo-alto)}

/* Nota de reserva al cierre de una sección oscura: separada por un filete
   fuerte para que no se lea como una tarjeta más de la retícula. */
.reserva{margin-top:var(--e-6);padding-top:var(--e-4);border-top:1px solid var(--linea-fuerte);max-width:70ch}
.reserva .lead{margin-top:var(--e-2)}

/* Canal de contacto propio de un servicio, bajo los botones de cierre. */
.contacto-directo{margin-top:var(--e-4);font-size:var(--t-peq);color:var(--texto-3)}
.contacto-directo a{color:var(--texto-2);border-bottom:1px solid var(--linea-fuerte)}
.contacto-directo a:hover{color:var(--rojo-alto)}
.contacto-directo i{font-style:normal;margin-inline:6px}
