/* ============================================================
   FERNÁNDEZ CUETO, PALACIOS Y CÍA., S.C.
   Propuesta consolidada V1 — capa de consolidación
   Base: Propuesta A · Sección de clientes: Propuesta B
   Paleta: mezcla 01 "Executive Blue" + 03 "Luminous Contrast"
   Debe cargarse SIEMPRE al final de las hojas de estilo.
   ============================================================ */

/* ------------------------------------------------------------
   1. Reparto del antiguo acento lima
   El lima hacía dos trabajos a la vez: energía interactiva y
   superficie de gran formato. Se separa en dos:
     · #58C7D9 luminoso  -> todo lo interactivo y los datos
     · #C5A880 dorado    -> un solo momento premium (la franja)
   ------------------------------------------------------------ */

/* La franja de declaración es el único uso del dorado en la página */
.statement { background: var(--gold); }
.statement strong { color: var(--navy); }
.statement img { opacity: .92; }

/* El disco del hero pasa al teal de marca, no al luminoso:
   a 620px el luminoso satura demasiado la composición */
.electric-disc { background: var(--teal); }
.hero-stage { background: var(--mist); }
.thin-grid {
  background-image:
    linear-gradient(rgba(16,54,125,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,54,125,.13) 1px, transparent 1px);
}

/* El chip de contacto de la barra: luminoso con texto profundo */
.header nav a:last-child { color: var(--deep); }

/* ------------------------------------------------------------
   2. Clientes — cuadrícula de la Propuesta B sobre el layout de A
   ------------------------------------------------------------ */
.clients-grid-sec {
  background: var(--mist);
  max-width: none;
  padding-left: max(42px, calc((100vw - 1336px) / 2));
  padding-right: max(42px, calc((100vw - 1336px) / 2));
}
.clients-grid-sec .section-title > p:last-child {
  font-size: 15px; line-height: 1.6; color: #3a5e83;
  max-width: 430px; margin: 25px 0 0;
}

.clients-grid {
  list-style: none; padding: 0; margin: 46px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.clients-grid li {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  min-height: 118px; padding: 22px 20px;
  display: grid; place-items: center;
  background: #fff; position: relative; overflow: hidden;
  transition: background .3s ease;
}
/* Filo dorado que crece desde la izquierda al pasar el cursor */
.clients-grid li:before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}
.clients-grid li:hover { background: var(--cream); }
.clients-grid li:hover:before { transform: scaleX(1); }

.clients-grid picture { display: block; line-height: 0; }
.clients-grid img {
  max-width: 118px; max-height: 46px; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05); opacity: .74;
  transition: filter .35s ease, opacity .35s ease,
              transform .35s cubic-bezier(.2,.9,.2,1);
}
.clients-grid li:hover img {
  filter: grayscale(0) contrast(1); opacity: 1; transform: scale(1.06);
}

/* El nombre aparece solo en hover: así la cuadrícula respira */
.cl-name {
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  font-family: var(--sans); font-size: 9.5px; line-height: 1.25;
  letter-spacing: .05em; text-transform: uppercase; font-weight: 700;
  color: var(--deep); text-align: center;
  opacity: 0; transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.clients-grid li:hover .cl-name { opacity: .72; transform: none; }

@media (max-width: 900px) {
  .clients-grid-sec { padding-left: 23px; padding-right: 23px; }
}
@media (max-width: 720px) {
  .clients-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  .clients-grid li { min-height: 96px; padding: 16px 12px; }
  .clients-grid img { max-width: 90px; max-height: 38px; filter: grayscale(.35); }
  .cl-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-grid li:before, .clients-grid img, .cl-name { transition: none; }
  .clients-grid li:hover img { transform: none; }
}

/* ------------------------------------------------------------
   3. Widget de tipo de cambio — armonizado con la nueva paleta
   ------------------------------------------------------------ */
.nav-fx-trend.is-up { color: #1F6B57; }
.nav-fx-trend.is-down { color: #A44A3F; }
.nav-fx-trend.is-flat { color: #6C7F96; }

/* ============================================================
   4. Sección de indicadores fiscales (INPC, FIX, UDIS, UMA)
   ============================================================ */
.indicadores { padding-bottom: 118px; }
.indicadores .section-title > p:last-child {
  font-size: 15px; line-height: 1.6; color: #3a5e83; max-width: 470px; margin: 25px 0 0;
}

/* Línea de estado de los datos (V7.3: sustituye al aviso de
   demostración; el estilo vive en el bloque 14) */

.ind-layout {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 26px;
}

/* --- Tarjeta principal: el INPC --- */
.ind-main {
  background: var(--navy); color: #fff; padding: 34px 36px 28px;
  position: relative; overflow: hidden;
}
.ind-label {
  font: 500 10px/1.5 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  color: var(--glow); margin: 0;
}
.ind-label b { font-weight: 400; color: #9DB6D4; letter-spacing: .06em; }
.ind-figure { display: flex; align-items: baseline; gap: 16px; margin: 22px 0 0; }
.ind-figure strong {
  font: 400 clamp(54px, 6.5vw, 82px)/.9 var(--serif);
  letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums;
}
.ind-figure span {
  font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--glow);
}
.ind-deltas { display: flex; gap: 38px; margin-top: 24px; }
.ind-deltas span {
  display: block; font: 500 9.5px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: #9DB6D4;
}
.ind-deltas strong {
  display: block; margin-top: 6px; font: 400 27px var(--serif);
  color: var(--glow); font-variant-numeric: tabular-nums;
}
.ind-spark { margin-top: 26px; height: 64px; }
.ind-spark svg { width: 100%; height: 64px; display: block; }
.ind-spark [data-spark-line] { fill: none; stroke: var(--glow); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ind-spark [data-spark-area] { fill: rgba(88,199,217,.14); stroke: none; }
.ind-fuente { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: #9DB6D4; }
.ind-fuente b { color: #C9DAEC; font-weight: 700; }

/* --- Tarjetas laterales --- */
.ind-side { display: grid; grid-template-rows: repeat(4, 1fr); gap: 16px; }
.ind-card {
  background: #fff; border: 1px solid var(--line); padding: 17px 20px;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .3s ease, transform .3s ease;
}
.ind-card:hover { border-color: var(--teal); transform: translateX(3px); }
.ind-card span {
  font: 500 9.5px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal-ink);
}
.ind-card strong {
  font: 400 31px/1 var(--serif); letter-spacing: -.03em; color: var(--deep);
  margin: 7px 0 4px; font-variant-numeric: tabular-nums;
}
.ind-card em { font-style: normal; font-size: 11px; color: #5B7593; }

/* --- Calculadora de factor de actualización --- */
.ind-tool {
  margin-top: 16px; background: var(--mist); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 34px 36px;
}
.ind-tool-head h3 {
  font: 400 34px/1 var(--serif); letter-spacing: -.03em; margin: 0 0 12px; color: var(--deep);
}
.ind-tool-head > p:last-child { font-size: 13px; line-height: 1.6; color: #3a5e83; margin: 0; }
.ind-tool-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.ind-tool-form label {
  display: block; font: 500 9.5px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal-ink);
}
.ind-tool-form select {
  display: block; width: 100%; margin-top: 8px; padding: 12px 13px;
  border: 1px solid var(--line); background: #fff; color: var(--deep);
  font: 600 14px var(--sans); border-radius: 0; cursor: pointer;
}
.ind-tool-form select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.ind-tool-out {
  grid-column: span 2; margin-top: 6px; padding: 18px 20px;
  background: var(--navy); color: #fff;
}
.ind-tool-out span {
  font: 500 9.5px var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--glow);
}
.ind-tool-out strong {
  display: block; margin: 7px 0 3px; font: 400 42px/1 var(--serif);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ind-tool-out em { font-style: normal; font-size: 11px; color: #9DB6D4; font-family: var(--mono); }

.ind-legal {
  margin: 26px 0 0; font-size: 12px; line-height: 1.6; color: #5B7593; max-width: 760px;
}
.ind-legal a { font-weight: 700; color: var(--teal-ink); border-bottom: 1px solid currentColor; }

@media (max-width: 1000px) {
  .ind-layout { grid-template-columns: 1fr; }
  .ind-side { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .ind-tool { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .ind-main { padding: 26px 22px 22px; }
  .ind-side { grid-template-columns: 1fr; }
  .ind-tool { padding: 26px 22px; }
  .ind-tool-form { grid-template-columns: 1fr; }
  .ind-tool-out { grid-column: span 1; }
  .ind-deltas { gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ind-card { transition: none; }
  .ind-card:hover { transform: none; }
}

/* Con ocho destinos la barra necesita algo más de aire por enlace */
@media (min-width: 1261px) {
  .header nav { gap: 24px; }
}

/* ============================================================
   5. Redes sociales en el bloque de contacto
   Los glifos van en un solo color de la paleta, que es el uso
   monocromo que permiten las guías de marca de Meta.
   ============================================================ */
.cd-social {
  padding: 22px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.22);
  margin-bottom: 34px; margin-top: -34px;
}
.cd-social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-social-links a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 13px;
  border: 1px solid rgba(255,255,255,.26);
  color: #fff; text-decoration: none;
  font: 600 12.5px var(--sans); letter-spacing: .01em;
  transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.9,.2,1);
}
.cd-social-links svg {
  width: 17px; height: 17px; flex: none;
  fill: var(--glow); transition: fill .3s ease;
}
.cd-social-links a:hover,
.cd-social-links a:focus-visible {
  background: rgba(255,255,255,.09);
  border-color: var(--glow);
  transform: translateY(-2px);
}
.cd-social-links a:hover svg,
.cd-social-links a:focus-visible svg { fill: #fff; }
.cd-social-links a:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

@media (max-width: 480px) {
  .cd-social-links { flex-direction: column; align-items: stretch; }
  .cd-social-links a { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-social-links a { transition: none; }
  .cd-social-links a:hover { transform: none; }
}

/* Corrección: sobre el azul del contacto, el teal oscuro del hover
   quedaba ilegible (2.1:1). Se sustituye por el luminoso. */
a.cd-item:hover strong { color: var(--glow); }
.cd-item b { color: var(--glow); }

/* ============================================================
   6. Imágenes en las páginas de servicio
   Dos tratamientos, un solo lenguaje:
     · .sv-ilu    ilustración vectorial (SVG en línea, pesa nada)
     · .sv-foto   fotografía real del despacho, en duotono de marca
   Las fotos se procesan a duotono con la rampa
   --deep -> --navy -> --teal -> casi --cream, para que convivan
   con el vector sin que la página parezca dos proyectos distintos.
   ============================================================ */

/* ---------- Ilustración vectorial ---------- */
.sv-ilu-wrap {
  max-width: 1420px; margin: auto;
  padding: 76px 42px 8px;
}
.sv-ilu-card {
  background: var(--mist);
  border-left: 3px solid var(--gold);
  padding: 44px clamp(24px, 4vw, 64px);
}
.sv-ilu-card svg { display: block; width: 100%; height: auto; }
.sv-ilu-pie {
  margin: 26px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(16,54,125,.14);
  font: 400 14px/1.6 var(--sans); color: #35577d;
  max-width: 640px;
}

/* ---------- Fotografía en duotono ---------- */
.sv-foto {
  max-width: 1420px; margin: auto;
  padding: 84px 42px 0;
}
.sv-foto-grid {
  display: grid; grid-template-columns: 1.35fr .85fr; gap: 0;
  align-items: stretch;
}
.sv-foto-img { position: relative; overflow: hidden; background: var(--deep); }
.sv-foto-img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.sv-foto-texto {
  background: var(--deep); color: #fff;
  padding: clamp(34px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: center;
}
.sv-foto-texto h2 {
  font: 400 clamp(26px, 2.6vw, 36px)/1.14 var(--serif);
  letter-spacing: -.02em; margin: 0 0 18px; color: #fff;
}
.sv-foto-texto p {
  font: 400 15.5px/1.68 var(--sans); color: #cfe3f2;
  margin: 0; max-width: 42ch;
}
.sv-foto-dato {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.2);
  font: 500 13px/1.5 var(--sans); color: var(--glow);
}

/* ---------- Autoridades ---------- */
.sv-autoridades { max-width: 1420px; margin: auto; padding: 88px 42px 8px; }
.sv-autoridades-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: rgba(16,54,125,.16);
  border: 1px solid rgba(16,54,125,.16); margin-top: 34px;
}
.sv-autoridades-grid article { background: var(--cream); padding: 30px 28px; }
.sv-autoridades-grid h3 {
  font: 600 15px/1.3 var(--sans); color: var(--navy);
  margin: 0 0 10px; letter-spacing: -.005em;
}
.sv-autoridades-grid p {
  font: 400 14px/1.6 var(--sans); color: #35577d; margin: 0;
}

@media (max-width: 900px) {
  .sv-foto-grid { grid-template-columns: 1fr; }
  .sv-foto-img { min-height: 260px; }
}
@media (max-width: 560px) {
  .sv-ilu-wrap, .sv-foto, .sv-autoridades { padding-left: 22px; padding-right: 22px; }
  .sv-ilu-card { padding: 28px 20px; }
}
/* ============================================================
   7. Sistema de ilustración con datos
   Las ilustraciones no decoran: rotulan el contenido real de
   cada servicio. Un mismo juego de clases sirve a las seis
   páginas, así que una ilustración nueva solo cambia de formas
   y de textos, nunca de estilos.
   ============================================================ */

/* ---------- Tipografía y color dentro del SVG ---------- */
.ilu-rotulo {
  font: 600 13px var(--sans); fill: var(--navy);
  letter-spacing: .04em; text-transform: uppercase;
}
.ilu-rotulo-c { text-anchor: middle; letter-spacing: .02em; text-transform: none; font-size: 14px; }
.ilu-dato { font: 400 14px var(--sans); fill: #35577d; }
.ilu-dato-on { fill: var(--navy); font-weight: 500; }

.ilu-linea { stroke: var(--navy); stroke-width: 1.5; opacity: .55; }
.ilu-punta { fill: var(--navy); opacity: .55; }
.ilu-base  { stroke: rgba(16,54,125,.22); stroke-width: 1.5; }
.ilu-marca { fill: var(--teal); }
.ilu-marca-oro { fill: var(--gold); }

.ilu-plano-b { fill: var(--deep); }
.ilu-plano-a { fill: var(--teal); }
.ilu-muesca  { fill: var(--navy); }
.ilu-filo    { stroke: var(--gold); stroke-width: 4; fill: none; }

/* ---------- Un solo momento de movimiento, al entrar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .sv-ilu-card .ilu-acto,
  .js .sv-ilu-card .ilu-fila,
  .js .sv-ilu-card .ilu-defensa,
  .js .sv-ilu-card .ilu-rotulo { opacity: 0; }

  .js .sv-ilu-card .ilu-acto { transform: translateX(-26px); }
  .js .sv-ilu-card .ilu-fila { transform: translateX(20px); }
  .js .sv-ilu-card .ilu-defensa { transform: scale(.94); transform-origin: 52% 50%; }

  .js .sv-ilu-card.is-visible .ilu-rotulo {
    animation: ilu-aparece .5s ease forwards .15s;
  }
  .js .sv-ilu-card.is-visible .ilu-acto {
    animation: ilu-llega .58s cubic-bezier(.2,.85,.25,1) forwards;
    animation-delay: calc(.18s + var(--i) * .075s);
  }
  .js .sv-ilu-card.is-visible .ilu-defensa {
    animation: ilu-planta .6s cubic-bezier(.2,.85,.25,1) forwards .62s;
  }
  .js .sv-ilu-card.is-visible .ilu-filo {
    stroke-dasharray: 298; stroke-dashoffset: 298;
    animation: ilu-traza .7s ease forwards .82s;
  }
  .js .sv-ilu-card.is-visible .ilu-fila {
    animation: ilu-sostiene .55s cubic-bezier(.2,.85,.25,1) forwards;
    animation-delay: calc(1s + var(--i) * .09s);
  }

  @keyframes ilu-aparece { to { opacity: 1; } }
  @keyframes ilu-llega    { to { opacity: 1; transform: translateX(0); } }
  @keyframes ilu-sostiene { to { opacity: 1; transform: translateX(0); } }
  @keyframes ilu-planta   { to { opacity: 1; transform: scale(1); } }
  @keyframes ilu-traza    { to { stroke-dashoffset: 0; } }
}

/* Sin animación: la ilustración se ve completa desde el primer momento */
@media (prefers-reduced-motion: reduce) {
  .sv-ilu-card .ilu-acto,
  .sv-ilu-card .ilu-fila,
  .sv-ilu-card .ilu-defensa,
  .sv-ilu-card .ilu-rotulo { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .ilu-dato { font-size: 17px; }
  .ilu-rotulo { font-size: 16px; }
}

/* Variante para la foto vertical: la imagen ocupa menos ancho */
.sv-foto-grid--retrato { grid-template-columns: .78fr 1.22fr; }
@media (max-width: 900px) {
  .sv-foto-grid--retrato { grid-template-columns: 1fr; }
  .sv-foto-grid--retrato .sv-foto-img { max-height: 420px; }
}

/* Piezas propias de alguna ilustración */
.ilu-periodos rect { fill: rgba(255,255,255,.16); }
.ilu-periodo-vivo  { fill: var(--glow); }

/* ============================================================
   8. (Retirado en V7.2) Retrato del equipo con duotono al pasar
   el puntero. El cliente pidió quitar las fotografías; la
   sección Equipo ahora vive en el bloque 12. El filtro SVG
   #fc-duotono también se retiró de index.html.
   ============================================================ */

/* ============================================================
   9. Las ilustraciones en pantalla de teléfono
   A 390 px de ancho, un esquema de 900 px deja el texto en
   cinco píxeles: ilegible. En lugar de encogerlo o de obligar a
   arrastrar de lado, el teléfono recibe la MISMA información
   apilada como texto. El listado es además la versión que leen
   los lectores de pantalla en cualquier tamaño.
   ============================================================ */
.sv-ilu-lista {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  .sv-ilu-card > svg.ilu { display: none; }
  .sv-ilu-lista {
    position: static; width: auto; height: auto;
    margin: 0; overflow: visible; clip-path: none; white-space: normal;
    display: grid; gap: 18px;
  }
  .sv-ilu-col-tit {
    font: 600 11px var(--sans); letter-spacing: .09em;
    text-transform: uppercase; color: var(--navy); margin: 0 0 12px;
  }
  .sv-ilu-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .sv-ilu-col li {
    font: 400 15px/1.45 var(--sans); color: #35577d;
    padding-left: 18px; position: relative;
  }
  .sv-ilu-col li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 8px; height: 1.5px; background: var(--navy); opacity: .5;
  }
  .sv-ilu-col-centro {
    background: var(--deep); color: #fff;
    padding: 16px 18px; text-align: center;
  }
  .sv-ilu-col-centro p {
    margin: 0; font: 400 17px/1.25 var(--serif); letter-spacing: -.01em;
  }
  .sv-ilu-col-on li { color: var(--navy); font-weight: 500; }
  .sv-ilu-col-on li::before {
    top: .42em; width: 9px; height: 9px; background: var(--teal); opacity: 1;
  }
  .sv-ilu-col-on li:last-child::before { background: var(--gold); }
}

/* ============================================================
   10. Ajustes finos de teléfono (formato vertical 9:16)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 560px) {
  .sv-ilu-wrap { padding-top: 54px; }
  .sv-foto { padding-top: 58px; }
  .sv-autoridades { padding-top: 62px; }
  .sv-foto-texto p { font-size: 15px; }
  .sv-ilu-pie { font-size: 14.5px; }
}

@media (max-width: 420px) {
  .sv-ilu-card { padding: 24px 16px; }
  .sv-autoridades-grid { grid-template-columns: 1fr; }
  .sv-autoridades-grid article { padding: 24px 20px; }
  .sv-foto-texto { padding: 30px 22px; }
  .sv-foto-grid--retrato .sv-foto-img { max-height: 340px; }
}

/* ============================================================
   11. Arreglo del escenario del hero en teléfono
   En 390 px de ancho, los cuatro adornos del escenario estaban
   posicionados en porcentajes pensados para escritorio y se
   encimaban: la tarjeta del logotipo caía sobre el círculo
   punteado, y el círculo y las barras compartían la misma
   esquina inferior izquierda.
   Además había TRES marcas de 1977 en 220 px de alto (el
   círculo, la nota de trayectoria y la franja de datos que
   sigue). En teléfono se conserva una sola.
   ============================================================ */
@media (max-width: 900px) {
  .hero { padding-bottom: 324px; }
  .hero-stage { height: 296px; overflow: hidden; }

  .hero-logo {
    top: 22px; left: 22px; right: auto;
    width: min(64%, 252px); padding: 12px 14px;
  }

  /* La nota de trayectoria baja a la esquina libre */
  .corner-note {
    top: auto; bottom: 92px; right: 22px;
    text-align: right; z-index: 4;
  }
  .corner-note strong { font-size: 38px; }

  /* El círculo en órbita se retira: repetía el mismo dato y
     chocaba con las barras. También ahorra una animación
     infinita en batería. */
  .year-orbit { display: none; }

  .pulse { left: 22px; bottom: 24px; }
  .hero-stage .hero-symbol { right: 24px; bottom: 20px; width: 86px; }
}

@media (max-width: 420px) {
  .hero { padding-bottom: 300px; }
  .hero-stage { height: 272px; }
  .hero-logo { width: min(70%, 228px); }
  .corner-note { bottom: 84px; }
  .corner-note strong { font-size: 33px; }
  .hero-stage .hero-symbol { width: 74px; }
}


/* ============================================================
   12. Sección Equipo — "Ficha de directorio" (V7.2)
   Elegida por el cliente entre las dos propuestas sin fotos
   (antes equipo-v2.css). Misma retícula con bordes que la
   sección de Servicios: el contenedor pone el filo izquierdo y
   superior, cada ficha el derecho y el inferior.
   La insignia lleva la ilustración del área (tomada literal de
   las páginas de servicio) o el isotipo para los dos socios.
   ============================================================ */
.team-directory {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 54px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

/* Con un número impar de fichas, la última fila quedaba con un
   hueco sin filo derecho ni inferior. Una celda vacía cierra la
   retícula; solo aparece cuando hace falta. */
.team-directory:has(> .team-row:last-child:nth-child(even))::after {
  content: "";
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.team-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}
.team-row.feature { grid-column: 1 / -1; padding: 34px 28px; }

.team-badge {
  flex: none;
  width: 68px;
  height: 68px;
  border: 1px solid var(--line);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s ease, border-color .35s ease;
}
.team-row.feature .team-badge { width: 92px; height: 92px; }
.team-badge svg { width: 58%; height: 58%; overflow: visible; }
.team-badge img { width: 54%; height: 54%; object-fit: contain; transition: filter .35s ease; }
.team-badge svg * { transition: fill .35s ease, opacity .35s ease; }

.team-name span {
  display: block; font: 9px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal-ink); margin-bottom: 5px;
}
.team-name h3 {
  font: 22px/1.1 var(--serif); color: var(--ink);
  position: relative; display: inline-block; padding-bottom: 6px;
}
.team-row.feature .team-name h3 { font-size: 30px; }
.team-name h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--gold); transition: width .4s ease;
}

/* Al cruzar el puntero sobre el nombre la insignia invierte a
   navy. Antes se blanqueaba todo el dibujo con un filtro y la
   insignia de Nómina quedaba como un cuadro blanco liso; ahora
   cada plano cambia de tono y el dibujo se sigue leyendo.
   Solo con puntero real: en pantalla táctil el hover se queda
   pegado después del toque. */
@media (hover: hover) and (pointer: fine) {
  .team-row:has(.team-name:hover) { background: rgba(197,168,128,.09); }
  .team-row:has(.team-name:hover) .team-badge { background: var(--navy); border-color: var(--gold); }
  .team-row:has(.team-name:hover) .team-badge img { filter: brightness(0) invert(1); }
  .team-row:has(.team-name:hover) .ilu-plano-b { fill: #fff; }
  .team-row:has(.team-name:hover) .ilu-plano-a { fill: var(--glow); }
  .team-row:has(.team-name:hover) .ilu-muesca  { fill: #A9D6E2; }
  .team-row:has(.team-name:hover) .ilu-periodos rect { fill: rgba(16,54,125,.2); }
  .team-row:has(.team-name:hover) .ilu-periodo-vivo { fill: var(--teal); }
  .team-row:has(.team-name:hover) .team-name h3::after { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .team-row, .team-badge, .team-badge img, .team-badge svg *,
  .team-name h3::after { transition: none; }
}

@media (max-width: 900px) {
  .team-directory { grid-template-columns: 1fr; }
  .team-directory::after { display: none; }
  .team-row.feature { grid-column: 1; }
}
@media (max-width: 550px) {
  .team-row { padding: 20px 18px; gap: 16px; }
  .team-badge { width: 56px; height: 56px; }
  .team-row.feature .team-badge { width: 72px; height: 72px; }
  .team-name h3 { font-size: 19px; }
  .team-row.feature .team-name h3 { font-size: 24px; }
}

/* ============================================================
   13. Certificación profesional (V7.3)
   Franja dentro de Servicios, debajo de las seis tarjetas. Usa
   la misma retícula de bordes que la lista de servicios. El panel
   profundo lleva el único elemento enfático: la sigla C.P.C. en
   Instrument Serif. El logo del Colegio va sobre blanco porque su
   texto es gris oscuro y no admite fondo de color.
   ============================================================ */
.cert {
  scroll-margin-top: 104px;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  margin-top: 64px;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.cert > div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- Panel profundo ---------- */
.cert-panel {
  background: var(--deep);
  color: #fff;
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.cert-panel .kicker { color: var(--glow); }
.cert-panel .kicker span { background: var(--glow); }
.cert-panel h3 {
  font: 400 clamp(40px, 3.6vw, 54px)/.95 var(--serif);
  letter-spacing: -.03em;
  margin: 0 0 22px;
}
.cert-panel h3 em { color: var(--glow); }
.cert-texto {
  font-size: 15px;
  line-height: 1.65;
  color: #c9d8e8;
  max-width: 440px;
  margin: 0 0 40px;
}
.cert-firma {
  margin: auto 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 22px;
}
.cert-sigla {
  display: block;
  font: italic 400 clamp(84px, 9vw, 132px)/.8 var(--serif);
  letter-spacing: -.04em;
  color: var(--teal);
  margin: 0 0 18px -4px;
}
.cert-nombre {
  display: block;
  font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--serif);
  letter-spacing: -.015em;
}
.cert-cargo {
  display: block;
  font: 500 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--glow);
  margin-top: 10px;
}

/* ---------- Ficha con el logo del Colegio ---------- */
.cert-ficha {
  background: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.cert-logo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-bottom: 30px;
}
.cert-datos { margin: 0 0 28px; }
.cert-datos div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.cert-datos div:last-child { border-bottom: 1px solid var(--line); }
.cert-datos dt { font-size: 13px; color: #436386; }
.cert-datos dd {
  margin: 0;
  font: 400 23px/1.1 var(--serif);
  letter-spacing: -.015em;
  color: var(--navy);
  text-align: right;
}
.cert-enlace {
  margin-top: auto;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.cert-enlace b { margin-left: 8px; color: var(--teal-ink); }
.cert-enlace:hover { color: var(--teal-ink); }
.cert-enlace:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* ---------- Registros ---------- */
.cert-registros {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: stretch;
}
.cert-registros-tit {
  margin: 0;
  padding: 24px 23px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  border-right: 1px solid var(--line);
}
.cert-registros ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.cert-registros li {
  padding: 22px 23px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.cert-registros li:last-child { border-right: 0; }
.cert-registros li span {
  font: 500 10px/1.45 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-ink);
}
.cert-registros li strong {
  font: 400 32px/1 var(--serif);
  letter-spacing: -.02em;
  color: var(--deep);
}

/* ---------- Tableta ---------- */
@media (max-width: 900px) {
  .cert { grid-template-columns: 1fr; margin-top: 48px; }
  .cert-panel, .cert-ficha { padding: 32px 26px; }
  .cert-registros { grid-template-columns: 1fr; }
  .cert-registros-tit { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 23px; }
  .cert-registros ul { grid-template-columns: 1fr 1fr; }
  .cert-registros li:nth-child(2n) { border-right: 0; }
  .cert-registros li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Teléfono ---------- */
@media (max-width: 550px) {
  .cert-panel, .cert-ficha { padding: 28px 22px; }
  .cert-datos div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .cert-datos dd { text-align: left; font-size: 21px; }
  .cert-registros li { padding: 18px 20px; }
  .cert-registros li strong { font-size: 26px; }
}

/* Remisión desde la página de Auditoría a la certificación */
.sv-cert-nota {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.sv-foto-texto .sv-cert-nota p {
  font: 400 22px/1.2 var(--serif);
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 16px;
}
.sv-cert-nota a {
  color: var(--glow);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.sv-cert-nota a b { margin-left: 6px; }
.sv-cert-nota a:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }

/* ============================================================
   14. Indicadores con datos oficiales (V7.3)
   La línea de estado dice de cuándo son los datos y de dónde
   vienen. Solo cambia de tono si hay un problema.
   ============================================================ */
.ind-estado {
  margin: 40px 0 0;
  font: 400 13px/1.5 var(--sans);
  color: #3a5e83;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ind-estado::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.ind-estado.is-aviso { color: #5A4A2E; }
.ind-estado.is-aviso::before { background: var(--gold); }
.ind-estado.is-error { color: #8a3a2f; }
.ind-estado.is-error::before { background: #d75a4a; }

/* ============================================================
   15. Formulario de contacto conectado (V7.3)
   Campo trampa fuera de la vista, campos marcados por el servidor
   y botón en espera mientras se envía.
   ============================================================ */
.cf-trampa {
  position: absolute !important;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.contact-form [aria-invalid="true"] {
  border-color: #F0A090;
  background: rgba(240, 160, 144, .12);
}
.contact-form .consent input[aria-invalid="true"] {
  outline: 2px solid #F0A090;
  outline-offset: 2px;
}
.form-status.is-error { color: #F7B9AC; }
.form-status.is-ok { color: var(--lime); }
.contact-form button:disabled {
  opacity: .65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   16. Botón de menú en tableta (V7.3)
   El menú compacto entra a 1260 px (servicio.css), pero las rayas
   del botón solo tenían estilo por debajo de 900 px: entre ambos
   anchos se veía el botón sin estilo. Se iguala aquí.
   ============================================================ */
@media (max-width: 1260px) {
  .menu {
    border: 0;
    background: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px 4px;
    cursor: pointer;
  }
  .menu i {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blue);
  }
  .menu:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
}