/* ==========================================================================
   MY TOUR EC — PLAN YOUR TRIP (/plan-your-trip/)  ·  rediseño visual
   Prefijo de clases: .pln-      (no toca app.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Encabezado editorial de la sección del formulario
   -------------------------------------------------------------------------- */
.pln-head { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.2rem,4vw,3.6rem); align-items:end; margin-bottom:clamp(2rem,4vw,3.2rem); }
.pln-head__l .eyebrow { margin-bottom:.85rem; }
.pln-head__l .section__title { margin:0; max-width:16ch; }
.pln-head__l .hairline { margin:1.2rem 0 0; }
.pln-head__r { margin:0; color:#3f4b52; }
@media (max-width:900px) { .pln-head { grid-template-columns:1fr; align-items:start; } .pln-head__l .section__title { max-width:none; } }

/* --------------------------------------------------------------------------
   2. Grid: formulario + tarjeta de contacto
   -------------------------------------------------------------------------- */
.pln-grid { display:grid; grid-template-columns:1.24fr .76fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:start; }
/* OJO: el reset de .pln-aside a position:static va DESPUÉS de su regla sticky
   (bloque 4); si se pone aquí lo pisa la regla posterior por orden de cascada. */
@media (max-width:980px) { .pln-grid { grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   3. Formulario premium
   -------------------------------------------------------------------------- */
.pln-form {
  position:relative; background:#fff;
  border:1px solid rgba(58,83,95,.08); border-top:3px solid var(--gold);
  border-radius:18px; padding:clamp(1.5rem,3vw,2.7rem);
  box-shadow:0 20px 48px rgba(44,63,73,.12);
}
.pln-fs { border:0; margin:0 0 1.7rem; padding:0; min-width:0; }
.pln-fs:last-of-type { margin-bottom:1.2rem; }
.pln-fs__lg {
  width:100%; float:none;
  margin:0 0 1.2rem; padding:0 0 .75rem; border-bottom:1px solid rgba(58,83,95,.12);
  font-family:"Montserrat",sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--slate); line-height:1;
}
.pln-fs__n {
  display:inline-flex; align-items:center; justify-content:center;
  width:27px; height:27px; margin-right:.7rem; vertical-align:middle;
  border-radius:50%; border:1px solid var(--gold);
  color:var(--gold-deep); font-size:.66rem; letter-spacing:.02em;
}
.pln-form .field { margin-bottom:1.15rem; }
.pln-form .field label { font-size:.7rem; letter-spacing:.16em; color:#828d93; transition:color .2s var(--ease); }
.pln-form .field:focus-within label { color:var(--gold-deep); }
.pln-form .field input,
.pln-form .field textarea {
  background:#fdfcf9; border:1px solid rgba(58,83,95,.16); border-radius:10px;
  padding:.95rem 1.05rem; font-size:.98rem;
}
.pln-form .field input::placeholder,
.pln-form .field textarea::placeholder { color:#aab3b8; }
.pln-form .field input:focus,
.pln-form .field textarea:focus { background:#fff; border-color:var(--gold); box-shadow:0 0 0 3px rgba(239,187,47,.22); }
.pln-form .field textarea { resize:vertical; min-height:150px; line-height:1.65; }
.pln-form .field input[type="date"] { color:var(--slate-ink); }
.pln-consent {
  font-family:"Montserrat",sans-serif; font-size:.78rem; line-height:1.65; color:#77828a;
  margin:0 0 1.25rem; padding-top:1.15rem; border-top:1px solid rgba(58,83,95,.12);
}
.pln-send { margin:0; }
.pln-send .btn { width:100%; padding:1.15rem 2rem; font-size:.84rem; letter-spacing:.2em; }

/* --------------------------------------------------------------------------
   4. Tarjeta de contacto (aside)
   -------------------------------------------------------------------------- */
.pln-aside { position:sticky; top:104px; border-top:3px solid var(--gold); }
.pln-aside .feature__title { margin-bottom:.7rem; }
.pln-contact { list-style:none; margin:1.5rem 0 0; padding:0; }
.pln-contact li { display:flex; align-items:center; gap:.95rem; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.10); }
.pln-contact li:first-child { border-top:1px solid rgba(255,255,255,.10); }
.pln-ico {
  flex:none; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(239,187,47,.45); background:rgba(239,187,47,.08);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.pln-ico svg { width:16px; height:16px; }
.pln-contact__k { display:block; font-family:"Montserrat",sans-serif; font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.2rem; }
.pln-contact__v { font-family:"Montserrat",sans-serif; font-size:.95rem; color:#fff; text-decoration:none; transition:color .2s var(--ease); }
.pln-contact__v:hover { color:var(--gold); }
.pln-aside__cta { display:block; width:100%; text-align:center; margin-top:1.7rem; align-self:stretch; }
/* en una sola columna la tarjeta no debe quedar pegajosa (debe ir después de .pln-aside) */
@media (max-width:980px) { .pln-aside { position:static; top:auto; } }

/* --------------------------------------------------------------------------
   5. Banda "How we work" — foto + scrim + pasos numerados
   -------------------------------------------------------------------------- */
.pln-process {
  position:relative; overflow:hidden; background-size:cover; background-position:center 42%;
  background-attachment:fixed; background-repeat:no-repeat;
  padding-block:clamp(3.4rem,7.5vw,6.4rem);
}
.pln-process__scrim { position:absolute; inset:0; background:linear-gradient(rgba(12,19,24,.58) 0%, rgba(12,19,24,.80) 55%, rgba(12,19,24,.88) 100%); }
.pln-process > .wrap { position:relative; z-index:1; }
.pln-process .section__title { color:#fff; }
.pln-process .section__head { margin-bottom:clamp(1.8rem,3.6vw,2.8rem); }

.pln-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.2vw,1.7rem); align-items:stretch; }
.pln-step {
  position:relative; display:flex; flex-direction:column;
  background:rgba(21,33,40,.52); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  padding:clamp(1.4rem,2.4vw,2rem); box-shadow:0 22px 52px rgba(0,0,0,.34);
}
.pln-step__n {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:56px; height:56px; border-radius:50%; border:2px solid var(--gold);
  background:rgba(12,19,24,.6); color:#fff;
  font-family:"Bon Vivant",serif; font-weight:400; font-size:1.28rem; line-height:1;
  margin-bottom:1.15rem; box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.pln-step__t { font-family:"Bon Vivant",serif; font-weight:400; font-size:clamp(1.12rem,1rem + .45vw,1.38rem); color:#fff; margin:0 0 .6rem; line-height:1.25; }
.pln-step p { color:rgba(255,255,255,.84); font-size:.93rem; line-height:1.72; margin:0; }
/* conector dorado entre pasos */
.pln-step::after {
  content:""; position:absolute; top:calc(clamp(1.4rem,2.4vw,2rem) + 28px);
  right:calc(-1 * clamp(1rem,2.2vw,1.7rem)); width:clamp(1rem,2.2vw,1.7rem); height:1px;
  background:linear-gradient(90deg, rgba(239,187,47,.8), rgba(239,187,47,.12));
}
.pln-step:last-child::after { display:none; }
.js .pln-steps > .reveal:nth-child(2) { transition-delay:.09s; }
.js .pln-steps > .reveal:nth-child(3) { transition-delay:.18s; }
.js .pln-steps > .reveal:nth-child(4) { transition-delay:.27s; }
@media (max-width:1000px) { .pln-steps { grid-template-columns:1fr 1fr; } .pln-step::after { display:none; } }
@media (max-width:920px)  { .pln-process { background-attachment:scroll; } }
@media (max-width:600px)  { .pln-steps { grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   6. Mapa — banda clara con textura + panel de oficina
   -------------------------------------------------------------------------- */
.pln-map { background-color:var(--arena); background-image:url('/wp-content/uploads/web/journeys-topo.jpg?v=2'); background-size:cover; background-position:center; background-repeat:no-repeat; }
.pln-map__grid { display:grid; grid-template-columns:.74fr 1.26fr; gap:clamp(1.4rem,3vw,2.4rem); align-items:stretch; }
.pln-map__panel {
  display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(58,83,95,.08); border-top:3px solid var(--gold); border-radius:16px;
  padding:clamp(1.5rem,2.6vw,2.2rem); box-shadow:0 18px 42px rgba(44,63,73,.12);
}
.pln-map__panel .pln-ico { color:var(--gold-deep); border-color:rgba(224,169,28,.45); background:rgba(239,187,47,.12); margin-bottom:1.1rem; }
/* el color va explícito: .pln-map__panel p (0,1,1) pisa a .feature__eyebrow (0,1,0) */
.pln-map__panel .feature__eyebrow { color:var(--gold-deep); margin-bottom:.9rem; }
.pln-map__panel p { color:#4f5b62; line-height:1.72; margin:0 0 .9rem; }
.pln-map__panel p:last-of-type { margin-bottom:1.3rem; }
.pln-map__hours { padding-top:1rem; border-top:1px solid rgba(58,83,95,.12); }
.pln-map__panel .btn { margin-top:auto; align-self:flex-start; }
.pln-map__frame { position:relative; min-height:420px; border-radius:16px; overflow:hidden; border:1px solid rgba(58,83,95,.10); box-shadow:0 22px 55px rgba(44,63,73,.22); }
.pln-map__frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; display:block; }
@media (max-width:900px) { .pln-map__grid { grid-template-columns:1fr; } .pln-map__frame { min-height:0; aspect-ratio:16/10; } }

/* --------------------------------------------------------------------------
   7. Banda de logos (Recognitions & Partners) — textura + encabezado
   -------------------------------------------------------------------------- */
.pln-logos { background-color:var(--slate-ink); background-image:url('/wp-content/uploads/web/partners-topo.jpg?v=1'); background-size:cover; background-position:center; background-repeat:no-repeat; }
.pln-logos::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(16,25,31,.55), rgba(16,25,31,.72)); }
.pln-logos > * { position:relative; z-index:1; }
.pln-logos .hairline { margin-top:1rem; }
.pln-logos .lmq__item { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13); }