/* =============================================================
   Mejoras UX: WhatsApp flotante, contacto en el pie, indicador de
   carruseles y foco visible con teclado.
   ============================================================= */

/* ── WhatsApp flotante (abajo a la derecha; «volver arriba» sube) ── */
.wa-flotante {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 95;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 54px; padding: 0 1.1rem 0 .95rem; border-radius: 999px;
  background: #25D366; color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  box-shadow: 0 10px 26px -10px rgba(16, 24, 40, .55);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.wa-flotante svg { width: 28px; height: 28px; flex: none; }
.wa-flotante:hover { background: #1EBE5A; transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(16, 24, 40, .6); }
.volver-arriba { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 700px) {
  .wa-flotante { width: 54px; padding: 0; justify-content: center; }
  .wa-flotante-txt { display: none; }
}
@media print { .wa-flotante { display: none; } }

/* ── Contacto en el pie ──────────────────────────────────────── */
.pie-contacto {
  list-style: none; position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .8rem 2.2rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem; color: var(--paper-2);
}
.pie-contacto li { display: flex; align-items: center; gap: .55rem; }
.pie-contacto svg { width: 18px; height: 18px; flex: none; color: var(--accent-3); }
.pie-contacto a { color: var(--paper); transition: color .2s; }
.pie-contacto a:hover { color: var(--accent-3); }
.pie-base { position: relative; z-index: 2; }

/* ── Indicador de posición de los carruseles ─────────────────── */
.carousel-counter { display: none; }
.carrusel-puntos {
  display: flex; justify-content: center; gap: .5rem;
  margin-top: 1.1rem; padding-inline: var(--gutter);
}
.carrusel-puntos button {
  width: 9px; height: 9px; padding: 0; border-radius: 999px;
  background: var(--line); transition: width .3s ease, background-color .3s ease;
}
.carrusel-puntos button:hover { background: var(--paper-3); }
.carrusel-puntos button.activo { width: 28px; background: var(--accent); }
.carrusel-barra {
  width: min(320px, 60vw); height: 3px; margin: 1.2rem auto 0;
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.carrusel-barra i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .25s ease; }

/* ── Foco visible al navegar con teclado ─────────────────────── */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .wa-flotante:focus-visible, .tema-toggle:focus-visible { outline-offset: 4px; border-radius: 999px; }
.carrusel-pista:focus-visible { outline-offset: -2px; border-radius: 12px; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 200; padding: .7rem 1rem; background: var(--accent); color: #fff; border-radius: 8px; }

/* ── Pie: paisaje andino con volcán que da paso al pie oscuro ───── */
.pie-paisaje { position: relative; height: clamp(90px, 11vw, 160px); margin-top: clamp(1rem, 3vw, 2rem); overflow: hidden; pointer-events: none; }
.pie-paisaje svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pie-paisaje .cerro-lejos { fill: #C9D4E1; }
.pie-paisaje .cerro-medio { fill: #6F86A0; }
.pie-paisaje .cerro-frente { fill: #0E1A2B; }
.pie-paisaje .crater { fill: none; stroke: #FF6A3D; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 106, 61, .9)); }
.pie-paisaje .humo circle { fill: #9AA9BA; opacity: .45; animation: humo-sube 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pie-paisaje .humo circle:nth-child(2) { animation-delay: -2s; }
.pie-paisaje .humo circle:nth-child(3) { animation-delay: -4s; }
@keyframes humo-sube { 0%, 100% { transform: translateY(0) scale(1); opacity: .4; } 50% { transform: translateY(-6px) scale(1.15); opacity: .2; } }
.pie-paisaje .estrato { fill: none; stroke: #A0522D; stroke-width: 2; opacity: .55; }
.pie-paisaje .estrato-2 { stroke: #C9A26B; opacity: .4; }
.pie-paisaje .falla { fill: none; stroke: #FF3030; stroke-width: 1.5; opacity: .7; }
html:not([data-theme="light"]) .pie-paisaje .cerro-lejos { fill: #1A2740; }
html:not([data-theme="light"]) .pie-paisaje .cerro-medio { fill: #24344F; }
@media (prefers-reduced-motion: reduce) { .pie-paisaje .humo circle { animation: none; } }

/* El pie es azul noche en ambos temas y continúa el cerro de delante. */
.pie, html[data-theme="light"] .pie {
  --paper: #FFFFFF; --paper-2: #C8D2DE; --paper-3: #8FA0B4; --line-soft: rgba(255, 255, 255, .1); --accent-3: #FF4A4A;
  background: #0E1A2B; color: #fff; border-top: 0; padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.pie::before { display: none; }
html[data-theme="light"] .pie .marca-logo--oscuro { display: none; }
html[data-theme="light"] .pie .marca-logo--claro { display: block; }
.pie .pie-links a, .pie .pie-contacto a { color: #fff; }
.pie .pie-links a:hover, .pie .pie-contacto a:hover { color: #FF4A4A; }
.pie-lava span { background: #FF8A3D; }

/* ── Botones más compactos ───────────────────────────────────────── */
.btn { font-size: .8rem; letter-spacing: .05em; }
.btn-grande { font-size: .82rem !important; padding: .45rem .48rem .45rem 1.15rem !important; gap: .65rem !important; }
.btn-grande .btn-circulo { width: 32px; height: 32px; }
.btn-grande .btn-circulo svg { width: 15px; height: 15px; }
.btn-nav { font-size: .76rem; padding: .55rem 1rem; }

/* ── Recuadro de Nosotros: más compacto e interactivo ───────────── */
.seccion .nosotros-txt .titular {
  font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem) !important;
  padding: 1.3rem 1.5rem !important;
  max-width: 34rem !important;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  cursor: default;
}
.seccion .nosotros-txt .titular::before { transition: width .35s var(--ease-out); }
.seccion .nosotros-txt .titular:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -24px rgba(11, 18, 32, .75), 0 0 0 1px rgba(255, 74, 74, .35); }
.seccion .nosotros-txt .titular:hover::before { width: 140px; }
.seccion .nosotros-txt .titular em { transition: color .3s; }
.seccion .nosotros-txt .titular:hover em { color: #FF8A8A; }
@media (prefers-reduced-motion: reduce) { .seccion .nosotros-txt .titular, .seccion .nosotros-txt .titular::before { transition: none; } }
.pie-paisaje { margin-top: 0; background: var(--bg); }
html[data-theme="light"] .pie-paisaje { background: var(--bg-2); }

/* ── Paisaje del pie en movimiento: erupción y aves ─────────────── */
.pie-paisaje svg { overflow: visible; }
.pie-paisaje { overflow: hidden; height: clamp(110px, 13vw, 180px); }
.pie-paisaje .colada { fill: none; stroke: #FF5A2A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80; filter: drop-shadow(0 0 3px rgba(255, 90, 42, .9));
  animation: colada-baja 5s ease-in infinite; }
.pie-paisaje .colada-2 { animation-delay: 2.2s; stroke-width: 2.4; }
@keyframes colada-baja { 0% { stroke-dashoffset: 80; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

@keyframes gota {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  45%  { transform: translate(calc(var(--dx) * .6), var(--up)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.4), 22px); opacity: 0; }
}

.pie-paisaje .aves path { fill: none; stroke: #3A4A60; stroke-width: 1.6; stroke-linecap: round; }
html:not([data-theme="light"]) .pie-paisaje .aves path { stroke: #8FA0B4; }
.pie-paisaje .aves { animation: aves-vuelan 26s linear infinite; }
.pie-paisaje .aves-2 { animation-duration: 34s; animation-delay: -14s; }
.pie-paisaje .aves path { animation: aleteo .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes aves-vuelan { 0% { transform: translate(-80px, 40px); } 50% { transform: translate(700px, 22px); } 100% { transform: translate(1520px, 36px); } }
@keyframes aleteo { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

@media (prefers-reduced-motion: reduce) {
  .pie-paisaje .colada, .pie-paisaje .lava-gotas circle, .pie-paisaje .aves, .pie-paisaje .aves path { animation: none; }
  .pie-paisaje .colada { stroke-dashoffset: 0; }
}
html.motion-paused .pie-paisaje * { animation-play-state: paused !important; }

/* ── Pie más compacto ─────────────────────────────────────────── */
.pie, html[data-theme="light"] .pie { padding-top: .6rem !important; padding-bottom: 64px !important; }
.pie-grid { padding-block: 0 !important; gap: 1rem 2rem; }
.pie-contacto { margin-top: 1rem; padding-top: .9rem; }
.pie-base { padding-top: .8rem !important; margin-top: .8rem; }
.pie .marca-logo { width: 130px !important; height: 86px !important; }
.pie-lava { height: 64px; }

/* Pie: final sin relleno sobrante. */
.pie, html[data-theme="light"] .pie { padding-bottom: 18px !important; }
.pie-lava { height: 26px !important; }
.pie::after { height: 40px; }
.pie-base { padding-bottom: 0 !important; }

/* ── Erupción más realista (sustituye a la anterior) ──────────── */
.pie-paisaje { height: clamp(140px, 15vw, 210px) !important; }
.pie-paisaje .crater { stroke: #FFB347; stroke-width: 3.5; filter: drop-shadow(0 0 6px #FF5A2A); }
.pie-paisaje .crater-brillo { transform-box: fill-box; transform-origin: center; animation: brillo-crater 2.4s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes brillo-crater { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }

/* Coladas: cauce incandescente fijo y pulsos de lava que bajan sin cortarse. */
.pie-paisaje .colada-base { fill: none; stroke: #8E1810; stroke-width: 4.5; stroke-linecap: round; opacity: .85; }
.pie-paisaje .colada { stroke: url(#lava-colada) !important; stroke-width: 3 !important; stroke-dasharray: 14 10 !important; stroke-dashoffset: 0 !important;
  opacity: 1 !important; filter: drop-shadow(0 0 4px rgba(255, 110, 40, .95)); animation: colada-fluye 1.6s linear infinite !important; }
.pie-paisaje .colada-2 { animation-duration: 2.1s !important; stroke-width: 2.4 !important; }
@keyframes colada-fluye { to { stroke-dashoffset: -48; } }

/* Gotas: subida con frenado y caída por gravedad (dos animaciones combinadas). */
.pie-paisaje .lava-gotas g { animation: gota-x var(--d) linear var(--w) infinite; }
.pie-paisaje .lava-gotas circle {
  fill: #FFE08A; opacity: 0; filter: drop-shadow(0 0 3px #FF5A2A);
  animation: gota-y var(--d) var(--w) infinite, gota-color var(--d) var(--w) infinite;
}
@keyframes gota-x { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } }
@keyframes gota-y {
  0%   { transform: translateY(0); opacity: 0; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  6%   { opacity: 1; }
  45%  { transform: translateY(var(--up)); animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  88%  { opacity: .9; }
  100% { transform: translateY(40px); opacity: 0; }
}
@keyframes gota-color { 0% { fill: #FFF3C4; } 40% { fill: #FFB347; } 75% { fill: #FF5A2A; } 100% { fill: #8E1810; } }
.pie-paisaje .lava-gotas circle { animation-name: gota-y, gota-color !important; }
@media (prefers-reduced-motion: reduce) {
  .pie-paisaje .lava-gotas g, .pie-paisaje .lava-gotas circle, .pie-paisaje .colada, .pie-paisaje .crater-brillo { animation: none !important; }
}

/* ── Pie: río, excavadora y perforadora ─────────────────────────── */
.pie-paisaje .rio { fill: none; stroke: #2F6E96; stroke-width: 7; stroke-linecap: round; opacity: .95; }
.pie-paisaje .rio-brillo { fill: none; stroke: #9FD3F2; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 18 26; opacity: .8; animation: rio-corre 3.5s linear infinite; }
@keyframes rio-corre { to { stroke-dashoffset: -88; } }

.pie-paisaje .excavadora .oruga { fill: #1B2433; stroke: #3A4A60; stroke-width: 1; }
.pie-paisaje .excavadora .chasis { fill: #F2B705; }
.pie-paisaje .excavadora .ventana { fill: #BFE3FA; }
.pie-paisaje .excavadora .pluma { fill: none; stroke: #E0A800; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.pie-paisaje .excavadora .cucharon { fill: #3A4A60; }
.pie-paisaje .excavadora .brazo { transform-box: view-box; transform-origin: 328px 121px; animation: excavar 3.2s ease-in-out infinite; }
@keyframes excavar { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(-14deg); } 80% { transform: rotate(6deg); } }

.pie-paisaje .perforadora .torre { fill: none; stroke: #D0D7E0; stroke-width: 1.8; stroke-linejoin: round; }
.pie-paisaje .perforadora .base-perf { fill: #F2B705; }
.pie-paisaje .perforadora .baliza { fill: #FF3B30; animation: baliza 1.4s steps(1) infinite; }
@keyframes baliza { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #FF3B30); } 50% { opacity: .2; filter: none; } }

/* Lava más contenida: menos brillo en el cráter y coladas más finas. */
.pie-paisaje .crater-brillo { opacity: .6; animation-duration: 3.2s; }
.pie-paisaje .colada { stroke-width: 2.2 !important; }
.pie-paisaje .colada-2 { stroke-width: 1.8 !important; }
.pie-paisaje .colada-base { stroke-width: 3.4; opacity: .7; }

@media (prefers-reduced-motion: reduce) { .pie-paisaje .rio-brillo, .pie-paisaje .excavadora .brazo, .pie-paisaje .baliza { animation: none; } }

/* Menú del pie: al pasar el ratón, blanco con subrayado coral (contrasta sobre el azul). */
.pie .pie-links a { position: relative; color: #E6ECF3; transition: color .25s; }
.pie .pie-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #FF7A6B; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.pie .pie-links a:hover, .pie .pie-links a:focus-visible { color: #FFFFFF; }
.pie .pie-links a:hover::after, .pie .pie-links a:focus-visible::after { transform: scaleX(1); }
.pie .pie-contacto a:hover { color: #FF9E92; }
.pie-paisaje .excavadora .brazo { transform-box: fill-box !important; transform-origin: 100% 100% !important; }
.pie-paisaje .perforadora .torre { stroke: #24344F !important; stroke-width: 2 !important; }
html:not([data-theme="light"]) .pie-paisaje .perforadora .torre { stroke: #C8D2DE !important; }

/* ── Video de «Por qué elegirnos»: oculta la marca de agua del teléfono (franja inferior). ── */
.porque-foto { border-radius: var(--r); }
.porque-foto video { height: 118% !important; top: 0 !important; bottom: auto !important; object-position: center top; }

/* ── «Por qué elegirnos» más amable: diferenciadores en tarjetas ── */
.porque-panel { padding-inline: clamp(1.4rem, 3.5vw, 3rem); }
.porque-lista { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin-top: 1.6rem; }
.porque-lista li {
  grid-template-columns: 42px 1fr; gap: .85rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: 14px;
  background: var(--card-2); border: 1px solid var(--line-soft);
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
}
.porque-lista li:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 30px -20px rgba(211, 32, 42, .45); }
.porque-lista li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.porque-ico { width: 42px !important; height: 42px !important; border-radius: 12px !important; background: var(--accent) !important; color: #fff !important; border: 0 !important; display: grid; place-items: center; }
.porque-ico svg { width: 18px; height: 18px; }
.porque-lista b {
  font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: .98rem !important; font-weight: 700 !important; line-height: 1.35; color: var(--paper);
}
.porque-lista div { text-align: left !important; text-align-last: left !important; font-size: .9rem; line-height: 1.55; }
.porque-txt .parrafo { text-align: left !important; text-align-last: left !important; }
html[data-theme="light"] .porque-lista li { background: #F9FAFB; border-color: #E4E7EC; }

/* ── Pie: más figuras del oficio ──────────────────────────────── */
.pie-paisaje .volqueta .caja { fill: #E2533A; }
.pie-paisaje .volqueta .cabina-v { fill: #F2B705; }
.pie-paisaje .volqueta .chasis-v { fill: #1B2433; }
.pie-paisaje .volqueta .rueda { fill: #1B2433; stroke: #8FA0B4; stroke-width: 1; }
.pie-paisaje .volqueta { animation: volqueta-avanza 16s ease-in-out infinite alternate; }
@keyframes volqueta-avanza { from { transform: translate(470px, 104px) scale(1.6); } to { transform: translate(560px, 107px) scale(1.6); } }

.pie-paisaje .geologo .casco { fill: #FFFFFF; stroke: #24344F; stroke-width: .8; }
.pie-paisaje .geologo .cara { fill: #E8B48A; }
.pie-paisaje .geologo .cuerpo-g { fill: #FF7A1A; }
.pie-paisaje .geologo .chaleco { stroke: #F4F7FA; stroke-width: 1.2; }
.pie-paisaje .geologo .pierna { stroke: #24344F; stroke-width: 2.4; stroke-linecap: round; }
.pie-paisaje .geologo .martillo { stroke: #24344F; stroke-width: 1.8; stroke-linecap: round; transform-box: fill-box; transform-origin: 0% 100%; animation: martillar 1.2s ease-in-out infinite; }
@keyframes martillar { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(28deg); } }

.pie-paisaje .topografo .teodolito { fill: #F2B705; }
.pie-paisaje .topografo .lente { fill: #24344F; }
.pie-paisaje .topografo .tripode { stroke: #24344F; stroke-width: 1.8; stroke-linecap: round; fill: none; }
html:not([data-theme="light"]) .pie-paisaje :is(.topografo .tripode, .geologo .pierna, .geologo .martillo) { stroke: #C8D2DE; }

.pie-paisaje .sismo-linea { fill: none; stroke: #D3202A; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: sismo 3.5s linear infinite; opacity: .8; }
@keyframes sismo { 0% { stroke-dashoffset: 120; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pie-paisaje :is(.volqueta, .geologo .martillo, .sismo-linea) { animation: none; } .pie-paisaje .sismo-linea { stroke-dashoffset: 0; } }

/* Pie: curvas de nivel sutiles (sin figuras). */
.pie-paisaje .curva-nivel { fill: none; stroke: rgba(200, 210, 222, .14); stroke-width: 1; }

/* ── «Por qué elegirnos»: un diferenciador por fila ─────────────── */
.porque-lista { grid-template-columns: 1fr !important; gap: .7rem; }
.porque-lista li:last-child:nth-child(odd) { grid-column: auto; }

/* Fondo fotográfico difuminado con parallax. */
.porque--con-fondo { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) !important; }
.porque-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.porque-fondo img { position: absolute; left: -4%; top: -20%; width: 108%; height: 140%; object-fit: cover; filter: blur(10px) saturate(1.1); transform: scale(1.06); }
.porque-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8, 13, 24, .82), rgba(8, 13, 24, .55)); }
html[data-theme="light"] .porque-fondo::after { background: linear-gradient(120deg, rgba(14, 22, 37, .72), rgba(14, 22, 37, .38)); }
html[data-theme="light"] .porque--con-fondo { background: #0E1625 !important; }
.porque--con-fondo .porque-grid { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); border-radius: var(--r); overflow: hidden; }
.porque--con-fondo .porque-panel { background: var(--card); }

/* ── Lava: las gotas nacen visibles en el cráter y se apagan al caer ── */
@keyframes gota-y {
  0%   { transform: translateY(0) scale(.7); opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  45%  { transform: translateY(var(--up)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  85%  { opacity: .85; }
  100% { transform: translateY(46px) scale(.6); opacity: 0; }
}
.pie-paisaje .lava-gotas circle { filter: drop-shadow(0 0 2px #FFB347) drop-shadow(0 0 5px rgba(255, 90, 42, .8)); }
/* Calor sobre el cráter: resplandor que respira y sube. */
.pie-paisaje .calor { transform-box: fill-box; transform-origin: 50% 100%; mix-blend-mode: screen; animation: calor 3.6s ease-in-out infinite; }
@keyframes calor { 0%, 100% { opacity: .35; transform: translateY(6px) scale(.8, .7); } 50% { opacity: .75; transform: translateY(-4px) scale(1.1, 1.15); } }
@media (prefers-reduced-motion: reduce) { .pie-paisaje .calor { animation: none; opacity: .5; } }

/* ── Tarjetas de diferenciadores: sombra contenida ─────────────── */
.porque-lista li:hover { box-shadow: 0 6px 14px -10px rgba(16, 24, 40, .35) !important; transform: translateY(-2px); }
html[data-theme="light"] .porque-lista li { box-shadow: none; }

/* ── «Por qué elegirnos»: color liso con relieve topográfico ────── */
.porque-fondo { display: none; }
.porque, .porque--con-fondo {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) !important;
  background-color: #0E1A2B !important;
  background-image:
    radial-gradient(70% 90% at 85% 10%, rgba(211, 32, 42, .18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 60 C80 20 180 100 300 60 S520 20 620 70'/%3E%3Cpath d='M-20 100 C90 60 190 140 300 100 S510 60 620 110'/%3E%3Cpath d='M-20 140 C100 100 200 180 300 140 S500 100 620 150'/%3E%3Cpath d='M-20 180 C110 140 210 220 300 180 S490 140 620 190'/%3E%3Cpath d='M-20 230 C120 190 220 270 300 230 S480 190 620 240'/%3E%3Cpath d='M-20 280 C130 240 230 320 300 280 S470 240 620 290'/%3E%3Cpath d='M-20 330 C140 290 240 370 300 330 S460 290 620 340'/%3E%3Cellipse cx='450' cy='300' rx='60' ry='26'/%3E%3Cellipse cx='450' cy='300' rx='34' ry='14'/%3E%3Cellipse cx='120' cy='40' rx='50' ry='18'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 600px 400px;
  background-attachment: scroll, fixed;
}
html[data-theme="light"] .porque, html[data-theme="light"] .porque--con-fondo {
  background-color: #EEF2F6 !important;
  background-image:
    radial-gradient(70% 90% at 85% 10%, rgba(211, 32, 42, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%230E1625' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M-20 60 C80 20 180 100 300 60 S520 20 620 70'/%3E%3Cpath d='M-20 100 C90 60 190 140 300 100 S510 60 620 110'/%3E%3Cpath d='M-20 140 C100 100 200 180 300 140 S500 100 620 150'/%3E%3Cpath d='M-20 180 C110 140 210 220 300 180 S490 140 620 190'/%3E%3Cpath d='M-20 230 C120 190 220 270 300 230 S480 190 620 240'/%3E%3Cpath d='M-20 280 C130 240 230 320 300 280 S470 240 620 290'/%3E%3Cpath d='M-20 330 C140 290 240 370 300 330 S460 290 620 340'/%3E%3Cellipse cx='450' cy='300' rx='60' ry='26'/%3E%3Cellipse cx='450' cy='300' rx='34' ry='14'/%3E%3Cellipse cx='120' cy='40' rx='50' ry='18'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.porque .porque-grid { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .45); border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px) { .porque, .porque--con-fondo { background-attachment: scroll, scroll; } }
.pie-paisaje .lava-gotas circle { transform-box: fill-box; transform-origin: center; }

/* Tema oscuro: el paisaje del pie usa el mismo fondo que la sección anterior. */
html:not([data-theme="light"]) .pie-paisaje { background: var(--bg-2); }

/* Recuadro de Nosotros: rojo más intenso y marca de agua del logo en la esquina. */
.seccion .nosotros-txt .titular em,
.seccion .nosotros-txt .titular:hover em { color: #FF3B3B !important; }
.nosotros-destacado { position: relative; max-width: 34rem; }
.nosotros-destacado .titular { max-width: none !important; }
.nosotros-marca {
  position: absolute; right: 14px; bottom: 12px; z-index: 2; width: 64px; height: auto;
  opacity: 0; transform: translate(6px, 6px) scale(.92); pointer-events: none;
  mix-blend-mode: screen; filter: brightness(1.2);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.nosotros-destacado:hover .nosotros-marca { opacity: .22; transform: translate(0, -4px) scale(1); }
.nosotros-destacado:hover .titular { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .nosotros-marca { transition: none; } }

/* ── Textos pequeños con más presencia ─────────────────────────── */
.profile-area { color: var(--accent) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .14em !important;
  padding: .3rem .65rem; border-radius: 999px; background: rgba(211, 32, 42, .08); border: 1px solid rgba(211, 32, 42, .25); }
html:not([data-theme="light"]) .profile-area { color: #FF6B6B !important; background: rgba(255, 59, 59, .12); }

/* ── Portafolio: filtro vertical moderno ───────────────────────── */
@media (min-width: 980px) {
  .listado-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
  .filtros-lateral { position: sticky; top: calc(var(--nav-h) + 20px); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; scrollbar-width: thin; }
}
.filtros-lateral {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 1.2rem 1rem; box-shadow: 0 12px 30px -24px rgba(16, 24, 40, .4);
}
.filtros-titulo { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3); margin: 0 .3rem .7rem; }
.filtros-lateral .project-search { display: block; font-size: .78rem; color: var(--paper-2); margin-bottom: .9rem; }
.filtros-lateral .project-search input { width: 100%; margin-top: .4rem; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--paper); font: inherit; font-size: .88rem; }
.filtros-lateral .filtros { display: flex !important; flex-direction: column; gap: .15rem !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.filtros-lateral .filtro {
  display: flex !important; justify-content: space-between; align-items: center; width: 100%;
  text-align: left; padding: .55rem .7rem !important; border-radius: 10px !important;
  border: 0 !important; border-left: 3px solid transparent !important; background: transparent !important;
  color: var(--paper-2) !important; font-size: .86rem !important; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s;
}
.filtros-lateral .filtro:hover { background: rgba(211, 32, 42, .06) !important; color: var(--paper) !important; }
.filtros-lateral .filtro.is-active { background: rgba(211, 32, 42, .1) !important; border-left-color: var(--accent) !important; color: var(--accent) !important; font-weight: 700; }
.filtros-lateral .filtro-count { min-width: 26px; text-align: center; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; background: var(--bg-2) !important; color: var(--paper-2) !important; }
.filtros-lateral .filtro.is-active .filtro-count { background: var(--accent) !important; color: #fff !important; }
.listado-main .filtro-info { margin-top: 0; }
@media (max-width: 979px) {
  .filtros-lateral .filtros { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .4rem !important; }
  .filtros-lateral .filtro { width: auto; white-space: nowrap; gap: .5rem; border-left: 0 !important; border-bottom: 3px solid transparent !important; }
  .filtros-lateral .filtro.is-active { border-bottom-color: var(--accent) !important; }
  .filtros-lateral { margin-bottom: 1.4rem; }
}

/* ── Llamada final del portafolio: centrada, titular en una línea ── */
.cierre .wrap { text-align: center; }
.cierre .parrafo { margin-inline: auto; text-align: center !important; text-align-last: center !important; }
.cierre .cierre-actions { justify-content: center; display: flex; flex-wrap: wrap; gap: .8rem; }
@media (min-width: 900px) { .seccion.cierre .titular { white-space: nowrap; max-width: none; } }
.cierre .titular::after { margin-inline: auto; }

/* Fichas del portafolio: títulos sin huecos y con más peso. */
.proy-title { text-align: left !important; text-align-last: left !important; font-weight: 700 !important; font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem) !important; letter-spacing: .03em; line-height: 1.3; }
.listado-main .proy-desc { color: var(--paper-2); }