/* ==========================================================================
   Calculadora de compensación con mapa-cámara (sección home). Portado del
   mockup _mockups/calc-v2/mapa-camara.html. Fondo híbrido (siluetas + puntos).
   Solo se carga en el home (la cargan home.php + calc-mapa.js + _airports.js).
   Prefijos propios (.cam-*, .cm-*) → no colisiona con el resto del sitio.
   ========================================================================== */
.cam{ position:relative; padding:clamp(28px,4vw,52px) 0 0;
  --accent:#1A73E8; --accent-2:#1557B0; --ok:#34d99b; --dest:#4f8bff; --teal:#164450;
  --ink:#0D0D0D; --ink-2:#5B6168; --ink-3:#8A9099; }

/* ============ ESCENARIO: mapa a SANGRE ============ */
/* width:100% (no 100vw): .cam ya ocupa todo el ancho del body, así el origen del
   stage coincide con el del .container (sin el desfase de media scrollbar del 100vw)
   y la cluster alinea con el resto en TODOS los anchos. Sigue siendo a sangre. */
.cam-stage{ position:relative; width:100%;
  /* VACÍO (sin card de resultado): stage COMPACTO para no dejar mapa muerto antes
     de Proceso (owner 25-jun: estaba muy distanciado). CON resultado: alto/inmersivo. */
  height:clamp(520px,44vw,620px);
  transition:height .45s cubic-bezier(.22,1,.36,1); }
.cam:has(#camOut.is-on) .cam-stage{ height:clamp(900px,64vw,1020px); }
.cam-mapwrap{ position:absolute; inset:0; overflow:hidden; }
.cam-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* (altura del stage unificada en la regla base de arriba) */
/* capas del mapa dentro del SVG (modo híbrido: siluetas tenues + puntos) */
#camLand{ color:var(--accent); display:none; } /* tono de marca: siluetas en azul, no teal */
.m-fill #camLand{ display:block; opacity:.16; }
.m-hybrid #camLand{ display:block; opacity:.13; }
#camDots{ display:none; }
.m-dots #camDots{ display:block; opacity:.6; }
.m-hybrid #camDots{ display:block; opacity:.62; }
/* velo del mapa: solo funde el borde SUPERIOR con la banda #eef3fe. El fundido
   INFERIOR a blanco lo hace .cam-mapwrap::after a TODO el ancho (también bajo el
   cluster izquierdo), para que no quede corte ni en el mapa ni en el lado del scrim. */
.cam-veil{ position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,#eef3fe 0%, rgba(238,243,254,0) 14%, rgba(238,243,254,0) 100%); }
/* el mapa se disuelve en la banda #eef3fe (no en blanco): el azul continúa hasta
   el final de la calc y entra en Proceso; el fundido a blanco lo hace .section-how. */
.cam-mapwrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(180deg, rgba(238,243,254,0) 0%, #eef3fe 78%, #eef3fe 100%); pointer-events:none; z-index:3; }
.cam-scrim{ position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, rgba(238,243,254,.94) 0%, rgba(238,243,254,.82) 28%, rgba(238,243,254,0) 56%); }
@media (min-width:1500px){ .cam-scrim{ background:linear-gradient(90deg, rgba(238,243,254,.94) 0%, rgba(238,243,254,.74) 24%, rgba(238,243,254,0) 46%); } }

/* ============ CLUSTER FLOTANTE IZQUIERDA ============ */
.cam-left{ position:absolute; top:0; bottom:0; z-index:3;
  /* 556 = 580 (mitad del container 1160) - 24 (padding del container) → la cluster
     alinea su CONTENIDO con el del .container del resto del home, no con su borde. */
  left:max(24px, calc(50% - 556px));
  width:min(460px, calc(100% - 48px));
  display:flex; flex-direction:column; justify-content:center; gap:20px;
  pointer-events:none; }
.cam-left > *{ pointer-events:auto; }

/* Cabecera con las clases CANÓNICAS del sitio (section-label/title/sub) para que
   tipografía y tamaños sean idénticos al resto del home; solo ajustamos márgenes
   dentro del cluster y el color del <em>. */
.cam-head .section-label{ margin-bottom:10px; }
.cam-head .section-title{ margin:0 0 8px; }
.cam-head .section-title em{ color:var(--accent); font-style:normal; }
.cam-head .section-sub{ margin:0; max-width:48ch; }

.cam-card{ position:relative; background:rgba(255,255,255,.98); backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(13,30,50,.10); border-radius:var(--r-xl); padding:32px; box-shadow:0 30px 64px -30px rgba(13,30,50,.36);
  display:flex; flex-direction:column; }
.cam-ctrl{ z-index:1; }
.cam-out{ z-index:2; }
.cam-ctrl:has(.ac-dropdown.open){ z-index:60; } /* dropdown canónico abierto → la card de controles por encima del resultado para poder clicar TODAS las opciones */

.cam-title{ display:flex; align-items:center; gap:9px; font:700 15px 'DM Sans',sans-serif; color:var(--ink); margin-bottom:22px; }
.cam-title svg{ width:19px; height:19px; color:var(--accent); flex:0 0 auto; }

.cm-field{ position:relative; }
.cm-iw{ position:relative; display:flex; align-items:center; }
.cm-iw .pin{ position:absolute; left:14px; width:16px; height:16px; color:var(--ink-3); pointer-events:none; transition:color .2s; z-index:1; }
.cm-field.is-ok .pin{ color:var(--accent); }
/* 16px NO es capricho tipográfico: Safari iOS hace ZOOM automático al enfocar
   un campo con font-size < 16px, y la página se queda ampliada. Estaba en 15px
   y era el ÚNICO input del sitio por debajo de 16 (el formulario /reclamar ya
   está a 16), por eso el zoom solo pasaba aquí. Owner 8-ago-2026. */
.cm-iw input{ width:100%; background:#fff; border:1.5px solid rgba(13,30,50,.16); color:var(--ink); font:500 16px 'DM Sans',sans-serif;
  padding:13px 14px 13px 40px; border-radius:12px; outline:none; transition:border-color .2s,box-shadow .2s; }
.cm-iw input::placeholder{ color:var(--ink-3); }
.cm-iw input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(26,115,232,.16); }
/* swap SIN círculo: flecha de intercambio limpia, con más aire arriba/abajo */
.cm-swap{ align-self:center; margin:16px 0; padding:4px; border:none; background:transparent; color:var(--ink-3); display:grid;place-items:center;cursor:pointer; transition:color .2s,transform .35s; }
.cm-swap:hover{ color:var(--accent); } .cm-swap:active{ transform:rotate(180deg); } .cm-swap svg{ width:22px;height:22px; }
.cm-ac{ position:absolute; z-index:40; left:0;right:0;top:calc(100% + 6px); background:#fff; border:1px solid rgba(13,30,50,.14); border-radius:13px; box-shadow:0 20px 44px -14px rgba(13,30,50,.3); max-height:230px; overflow-y:auto; padding:6px; display:none; }
.cm-ac.show{ display:block; }
.cm-ac__item{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:9px; cursor:pointer; }
.cm-ac__item:hover,.cm-ac__item.active{ background:rgba(26,115,232,.10); }
.cm-ac__code{ font:700 .8rem 'DM Sans'; background:rgba(26,115,232,.12); color:var(--accent); border-radius:6px; padding:4px 7px; min-width:46px; text-align:center; }
.cm-ac__city{ font-size:.94rem; color:var(--ink); } .cm-ac__country{ font-size:.76rem; color:var(--ink-3); margin-left:auto; }

/* card de resultado: oculta hasta origen+destino, con animación canónica */
.cam-out{ overflow:hidden; max-height:0; opacity:0; transform:translateY(10px);
  transition:max-height .5s cubic-bezier(.22,1,.36,1), opacity .38s ease, transform .5s cubic-bezier(.22,1,.36,1);
  flex-direction:column; justify-content:center; }
.cam-out.is-on{ max-height:640px; opacity:1; transform:none; }
.cam-result{ display:flex; flex-direction:column; align-items:flex-start; }
.cam-result .tier, .cam-result .tier-labels{ width:100%; }
.cam-result .route{ font-size:.9rem; color:var(--ink-2); margin-bottom:4px; } .cam-result .route b{ color:var(--ink); }
.cam-result .dist{ font-size:.8rem; color:var(--ink-3); margin-bottom:10px; }
.cam-result .amount{ display:flex; align-items:baseline; gap:6px; line-height:1; }
.cam-result .val{ font:850 clamp(3rem,7vw,4rem)/1 'DM Sans'; letter-spacing:-.03em; color:var(--ink); }
.cam-result .cur{ font-size:1.7rem; color:var(--accent); font-weight:600; margin-left:5px; }
.cam-result .per{ font-size:.86rem; color:var(--ink-3); align-self:flex-end; margin-bottom:8px; }
.cam-result .tier{ display:flex; gap:6px; margin-top:16px; }
.cam-result .seg{ flex:1; height:6px; border-radius:999px; background:rgba(13,30,50,.10); overflow:hidden; position:relative; }
.cam-result .seg.on::after{ content:""; position:absolute; inset:0; border-radius:999px; background:var(--accent); animation:camfill .6s ease forwards; transform-origin:left; }
@keyframes camfill{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.cam-result .tier-labels{ display:flex; gap:6px; margin-top:7px; }
.cam-result .tier-labels span{ flex:1; font-size:.66rem; color:var(--ink-3); text-align:center; }
.cam-result .legal{ margin-top:12px; font-size:11px; line-height:1.4; color:var(--ink-3); }
/* CTA = botón canónico .btn-cta del sitio; solo separación superior. */
.cam-result .btn-cta{ margin-top:16px; }
.cam-result .btn-cta svg{ width:16px;height:16px; }

/* nodos del SVG — LÍNEA APROBADA: verde(origen)→azul(destino), avión azul */
.cm-pulse{ transform-origin:center; transform-box:fill-box; }
#camArcG stop:nth-child(1){ stop-color:var(--ok); } #camArcG stop:nth-child(2){ stop-color:var(--dest); }
#camEndO circle{ fill:var(--ok); } #camEndD circle{ fill:var(--dest); }
#camGlow stop{ stop-color:var(--dest); }
#camPlaneIcon{ fill:var(--accent); }

/* ============ MÓVIL ============ */
/* En móvil el mapa-cámara estorba (teclado + banner inferior fijo + scroll poco
   fino) y aporta poco a 390px → lo quitamos por completo. La calc queda en lo
   esencial: cabecera + card de aeropuertos + card de resultado (importe grande).
   El motor (calc-mapa.js) además NO carga el SVG denso de puntos en móvil. */
@media (max-width:767px){
  .cam{ display:block; padding:clamp(28px,7vw,44px) 0; }
  .cam-stage{ display:contents; }
  /* alineado IGUAL que el .container del resto del home (no un bloque de 560 centrado) */
  .cam-left{ position:static; width:auto; max-width:var(--max-w); margin:0 auto; padding:0 24px;
    justify-content:flex-start; gap:16px; }
  .cam-card{ padding:24px; }
  /* MÓVIL: el mapa-cámara va DENTRO de la card de resultado como banner animado
     (calc-mapa.js reubica #camMapwrap como 1er hijo de #camOut). */
  .cam-veil, .cam-scrim{ display:none; }
  .cam-out{ padding:0; overflow:hidden; }
  .cam-out.is-on{ max-height:1100px; } /* fijo (NO none) para que la animación de aparición/desaparición sea la misma que en desktop (max-height no transiciona desde/hacia 'none') */
  .cam-out .cam-mapwrap{ position:relative; inset:auto; display:block; width:100%; height:178px;
    border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden; border-bottom:1px solid rgba(13,30,50,.07); }
  .cam-out .cam-svg{ position:absolute; inset:0; width:100%; height:100%; }
  .cam-mapwrap::after{ display:none; } /* en móvil el mapa es banner con borde propio, sin fundido inferior */
  .cam-out .cam-result{ padding:22px 24px 24px; }
}
/* padding lateral del cluster = idéntico al .container en cada breakpoint */
@media (max-width:480px){ .cam-left{ padding:0 16px; } }
@media (max-width:360px){ .cam-left{ padding:0 12px; } }