/* ============================================================
   LANDING VISUAL · D-065 · 14-may-2026
   ----------------------------------------------------------------
   Polish visual para las 54 city landings (concurso-X, lso-X,
   abogado-mercantil-X, reclamaciones-X). Hasta hoy eran walls of
   text sin imagen ni jerarquía visual. Cliente: "son feas".

   Aporta sin tocar SEO ni JSON-LD:
     · hero split: texto izquierda + imagen brand derecha (flotada)
     · trust-strip 4-KPI bajo el hero
     · entity-item con cinta superior teal→navy
     · servicios area-item con hover lift sutil
     · type rhythm refinado en .prose

   Funciona sobre la estructura existente: solo añade un
   `<div class="page-hero__visual">` dentro de `.page-hero` y un
   `<section class="trust-strip-wrap">` tras el `</section>` que
   cierra `.stage`. Resto es CSS puro.

   Carga DESPUÉS de visual-internas.css para ganar cascada.
   `prefers-reduced-motion: reduce` apaga animaciones.
   ============================================================ */

/* ---------- HERO ----------
   El hero "imagen flotada 38%" de D-065 fue sustituido en D-076 por
   el HERO CINEMÁTICO (foto full-bleed + duotono azul navy→teal).
   Toda la regla vive ahora en visual-internas.css para que se aplique
   a las 147 internas, no solo a las city landings. No redeclarar aquí. */

/* ---------- TRUST-STRIP: 4 KPIs bajo el hero ---------- */
.trust-strip-wrap {
  padding: 0 40px 32px;
  margin-top: -16px;
}
@media (max-width: 720px) {
  .trust-strip-wrap { padding: 0 16px 18px; margin-top: -8px; }
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--exa-line, #CAD2DA);
  border: 1px solid var(--exa-line, #CAD2DA);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px -10px rgba(18, 3, 95, 0.12);
}
.trust-strip__item {
  background: #fff;
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
}
.trust-strip__item b {
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--exa-secondary, #12035F);
  letter-spacing: -0.01em;
  line-height: 1;
}
.trust-strip__item b .star { color: #FFBC7D; }
.trust-strip__item span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--exa-text, #6B6B6B);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-strip__item { padding: 18px 12px; min-height: 84px; }
  .trust-strip__item b { font-size: 22px; }
  .trust-strip__item span { font-size: 9.5px; letter-spacing: 0.12em; }
}

/* ---------- ENTITY-ITEM: cinta superior teal→navy ---------- */
.entities-grid .entity-item {
  position: relative;
  padding-top: 22px;
  background: #fff;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms ease,
              border-color 240ms ease;
}
.entities-grid .entity-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--exa-teal, #076C6A) 0%, var(--exa-primary, #538794) 100%);
  border-radius: 10px 10px 0 0;
}
.entities-grid .entity-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px -16px rgba(18, 3, 95, 0.22);
  border-color: var(--exa-primary, #538794);
}
.entities-grid .entity-item b {
  font-size: 15.5px;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* ---------- AREA-ITEM: lift sutil ---------- */
.areas-list .area-item {
  background: #fff;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease,
              border-color 220ms ease;
}
.areas-list .area-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -14px rgba(18, 3, 95, 0.18);
  border-color: var(--exa-primary, #538794);
}
.areas-list .area-item h3 {
  font-size: 18.5px;
}
.areas-list .area-item a:last-child {
  display: inline-block;
  margin-top: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.areas-list .area-item a:last-child:hover {
  border-bottom-color: var(--exa-primary, #538794);
}

/* ---------- PROSE: ritmo tipográfico refinado ---------- */
.band .prose p,
.band .prose ul,
.band .prose ol {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-soft, #4D5A66);
}
.band .prose p + p { margin-top: 14px; }
.band .prose ul li,
.band .prose ol li { margin: 6px 0; }
.band .prose strong { color: var(--exa-secondary, #12035F); font-weight: 600; }
.band .prose .table-wrap {
  margin: 22px 0;
  border-radius: 12px;
  border: 1px solid var(--exa-line, #CAD2DA);
  overflow: hidden;
}
.band .prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}
.band .prose table thead th {
  background: var(--exa-bg-alt, #F0F4F5);
  color: var(--exa-secondary, #12035F);
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--exa-line, #CAD2DA);
}
.band .prose table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(202, 210, 218, 0.5);
  vertical-align: top;
  color: var(--ink, #161616);
}
.band .prose table tbody tr:last-child td { border-bottom: none; }
.band .prose table tbody tr:nth-child(even) td { background: rgba(240, 244, 245, 0.4); }

/* ---------- CONTACT BLOCK: gradiente brand sutil ---------- */
.contact-block {
  background: linear-gradient(135deg,
              rgba(83, 135, 148, 0.05) 0%,
              rgba(7, 108, 106, 0.04) 100%) !important;
  border: 1px solid var(--exa-primary, #538794) !important;
  border-style: dashed !important;
}
.contact-block h2 {
  color: var(--exa-secondary, #12035F) !important;
}

/* ---------- AEO-DEF: borde left teal más marcado ---------- */
.aeo-def {
  border-left: 3px solid var(--exa-teal, #076C6A) !important;
  padding-left: 24px !important;
}

/* ---------- DETAILS / FAQ: hover suave ---------- */
details {
  transition: background 200ms ease;
}
details:hover {
  background: rgba(240, 244, 245, 0.5);
}
details summary {
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* ============================================================
   D-067 · 14-may-2026 · Polish visual MÁS allá del hero
   Tras D-065 el hero quedó fuerte pero el body seguía text-heavy.
   ============================================================ */

/* ---------- SECTION-HEAD: barra accent + lead italic ---------- */
.section-head {
  text-align: center;
}
.section-head::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--exa-teal, #076C6A), var(--exa-primary, #538794));
  margin: 0 auto 22px;
  border-radius: 2px;
}
.section-head .kicker {
  font-size: 11.5px !important;
  letter-spacing: 0.26em !important;
  color: var(--exa-teal, #076C6A) !important;
  font-weight: 500;
}
.section-head p {
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px) !important;
  color: var(--ink-soft, #4D5A66) !important;
  line-height: 1.5 !important;
  max-width: 60ch;
  margin: 18px auto 0 !important;
}

/* ---------- DROPCAP en primer párrafo de prose ---------- */
.band .prose > p:first-of-type::first-letter {
  font-family: "Montserrat", -apple-system, sans-serif;
  font-size: 3.2em;
  font-weight: 500;
  float: left;
  line-height: 0.9;
  margin: 4px 12px 0 0;
  color: var(--exa-secondary, #12035F);
  text-transform: none;
}

/* ---------- BAND--ALT: textura sutil de puntos ---------- */
section.band--alt {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(83, 135, 148, 0.07) 1px, transparent 0) !important;
  background-size: 24px 24px;
  background-color: var(--exa-bg-alt, #F0F4F5) !important;
}

/* ---------- AEO-DEF: badge "?" navy ---------- */
.aeo-def {
  position: relative;
  padding-left: 68px !important;
  padding-top: 28px !important;
}
.aeo-def::after {
  content: "?";
  position: absolute;
  left: 20px; top: 26px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--exa-secondary, #12035F);
  color: #fff;
  border-radius: 50%;
  font-family: "Montserrat", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
}

/* ---------- ENTITY-GRID en band--alt: numerador 01/02/03 ---------- */
.band--alt .entities-grid {
  counter-reset: paso;
}
.band--alt .entities-grid .entity-item {
  counter-increment: paso;
  padding-top: 30px;
}
.band--alt .entities-grid .entity-item::after {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 12px; right: 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--exa-primary, #538794);
  letter-spacing: 0.08em;
  opacity: 0.75;
  font-weight: 500;
}

/* ---------- FAQ DETAILS: cards modernas ---------- */
details {
  border: 1px solid var(--exa-line, #CAD2DA) !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
  padding: 16px 22px !important;
  background: #fff;
  transition: border-color 240ms ease, background 240ms ease, box-shadow 240ms ease !important;
}
details:hover {
  border-color: var(--exa-primary, #538794) !important;
  background: rgba(240, 244, 245, 0.4) !important;
  box-shadow: 0 4px 14px -10px rgba(18, 3, 95, 0.18) !important;
}
details[open] {
  background: linear-gradient(180deg, rgba(240, 244, 245, 0.5) 0%, #fff 100%) !important;
  border-color: var(--exa-primary, #538794) !important;
  box-shadow: 0 4px 18px -12px rgba(18, 3, 95, 0.22) !important;
}
details summary {
  border-bottom: none !important;
}

/* ---------- TABLA: sombra externa + mejor separación ---------- */
.band .prose .table-wrap {
  box-shadow: 0 4px 18px -12px rgba(18, 3, 95, 0.16);
}

/* ---------- LINKS dentro de prose: animación underline ---------- */
.band .prose a:not(.btn) {
  background-image: linear-gradient(180deg, transparent 92%, var(--exa-teal, #076C6A) 92%, var(--exa-teal, #076C6A) 96%, transparent 96%);
  background-size: 100% 100%;
  transition: background-image 200ms ease;
  padding-bottom: 1px;
}
.band .prose a:not(.btn):hover {
  background-image: linear-gradient(180deg, transparent 0%, transparent 92%, var(--exa-primary, #538794) 92%, var(--exa-primary, #538794) 96%, rgba(83, 135, 148, 0.08) 96%);
}

/* ---------- BAND padding refinado (más aire arriba) ---------- */
section.band {
  padding-top: 84px;
  padding-bottom: 84px;
}
@media (max-width: 720px) {
  section.band {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section-head { margin-bottom: 40px; }
  .band .prose > p:first-of-type::first-letter { font-size: 2.6em; margin-right: 9px; }
}

/* ============================================================
   FIN D-067
   ============================================================ */

/* ============================================================
   D-068 (moved to visual-internas.css en D-069 · 14-may-2026)
   El bloque "home theme unification" se ha movido a visual-internas.css
   para que se aplique a las 90 internas (no solo a las 54 city que
   cargan landing-visual.css).
   ============================================================ */

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .entities-grid .entity-item,
  .areas-list .area-item,
  details {
    transition: none !important;
  }
  .entities-grid .entity-item:hover,
  .areas-list .area-item:hover {
    transform: none !important;
  }
}