/* takeapictour.com — azul real, amarillo limón y verde césped sobre fondo claro */

:root {
  --azul-noche: #0b1240;
  --azul-real: #1a2fd6;
  --azul-vivo: #2e45f0;
  --azul-claro: #e9edff;
  --azul-tinte: #f3f5ff;
  --lila: #6c5cf5;
  --sol: #ffe14d;
  --sol-claro: #fff07f;
  --sol-oscuro: #f0c400;
  --verde: #2fb44e;
  --verde-claro: #43cb63;
  --verde-oscuro: #23933e;
  --tinta: #141a3a;
  --tinta-2: #4a5275;
  --borde: #dfe4f7;
  --blanco: #ffffff;

  --titulos: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cuerpo: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;

  --caja: 1160px;
  --lateral: clamp(1rem, 4vw, 2.4rem);
  --barra: 68px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

body { margin: 0; background: var(--blanco); color: var(--tinta); font-family: var(--cuerpo); font-size: 1.08rem; line-height: 1.7; }
body.tp-inmovil { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
strong { color: var(--azul-real); font-weight: 700; }

:focus-visible { outline: 3px solid var(--lila); outline-offset: 3px; border-radius: 6px; }
section:focus { outline: none; }

.tp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-saltar { position: absolute; top: -90px; left: 1rem; z-index: 999; padding: 0.7rem 1rem; border-radius: 10px; background: var(--sol); color: var(--tinta); font-weight: 700; text-decoration: none; }
.tp-saltar:focus { top: 1rem; }

.tp-caja { width: min(100% - 2 * var(--lateral), var(--caja)); margin-inline: auto; }

/* ---------- botones ---------- */

.tp-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--titulos);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.tp-boton::after { content: "→"; font-size: 1.05em; transition: transform 0.18s ease; }
.tp-boton:hover::after { transform: translateX(3px); }
.tp-boton:active { transform: scale(0.97); }
.tp-boton--sol { background: var(--sol); color: var(--tinta); box-shadow: 0 6px 18px -8px rgba(240, 196, 0, 0.9); }
.tp-boton--sol:hover { background: var(--sol-claro); box-shadow: 0 10px 24px -8px rgba(240, 196, 0, 1); }
.tp-boton--sol:active { background: var(--sol-oscuro); }
.tp-boton--verde { background: var(--verde); color: var(--blanco); box-shadow: 0 6px 18px -8px rgba(47, 180, 78, 0.9); }
.tp-boton--verde:hover { background: var(--verde-claro); }
.tp-boton--verde:active { background: var(--verde-oscuro); }
.tp-boton--grande { min-height: 54px; padding: 0.85rem 1.8rem; font-size: 1rem; }

/* ---------- barra superior ---------- */

.tp-barra { position: sticky; top: 0; z-index: 300; background: var(--azul-noche); box-shadow: 0 2px 0 rgba(255, 225, 77, 0.6); }
.tp-barra__fila { display: flex; align-items: center; gap: 1.2rem; height: var(--barra); }

.tp-logo { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--blanco); text-decoration: none; flex-shrink: 0; }
.tp-logo__w { font-family: var(--titulos); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; }
.tp-logo__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--sol); }
.tp-logo__ec { color: #b8c2ff; font-family: var(--titulos); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.tp-nav { margin-left: auto; }
.tp-nav ul { display: flex; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.tp-nav__a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.8rem; border-radius: 10px; color: #dfe4ff; font-family: var(--titulos); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease; }
.tp-nav__a:hover { background: rgba(255, 255, 255, 0.1); color: var(--blanco); }
.tp-nav__a[aria-current="true"] { background: var(--azul-vivo); color: var(--blanco); }
.tp-barra__cta { min-height: 42px; padding: 0.5rem 1.1rem; font-size: 0.84rem; }
.tp-barra__cta::after { display: none; }

.tp-menu { display: none; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: var(--blanco); cursor: pointer; }
.tp-menu__l { position: relative; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: background-color 0.2s ease; }
.tp-menu__l::before,
.tp-menu__l::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s ease, top 0.2s ease; }
.tp-menu__l::before { top: -6px; }
.tp-menu__l::after { top: 6px; background: var(--sol); }
.tp-menu[aria-expanded="true"] .tp-menu__l { background: transparent; }
.tp-menu[aria-expanded="true"] .tp-menu__l::before { top: 0; transform: rotate(45deg); }
.tp-menu[aria-expanded="true"] .tp-menu__l::after { top: 0; transform: rotate(-45deg); }

.tp-desplegable { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--barra)); overflow-y: auto; padding: 1rem 0 1.6rem; background: var(--blanco); border-bottom: 4px solid var(--azul-real); box-shadow: 0 24px 40px -20px rgba(11, 18, 64, 0.6); }
.tp-desplegable[hidden] { display: none; }
.tp-desplegable__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tp-desplegable__a { display: flex; align-items: center; min-height: 52px; padding: 0.4rem 1rem; border-radius: 14px; background: var(--azul-tinte); color: var(--tinta); font-family: var(--titulos); font-weight: 700; text-decoration: none; }
.tp-desplegable__a:hover { background: var(--azul-claro); color: var(--azul-real); }
.tp-desplegable__ctas { display: grid; gap: 0.7rem; margin-top: 1.2rem; }

/* ---------- portada ---------- */

.tp-portada {
  position: relative;
  padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(2.6rem, 5vw, 4.4rem);
  background:
    radial-gradient(600px 380px at 88% 18%, rgba(108, 92, 245, 0.55), transparent 70%),
    radial-gradient(500px 300px at 8% 100%, rgba(46, 69, 240, 0.7), transparent 70%),
    linear-gradient(160deg, #2236e8, var(--azul-real) 45%, #1323a8);
  color: var(--blanco);
  overflow: hidden;
}
.tp-portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: var(--blanco); clip-path: polygon(0 100%, 100% 30%, 100% 100%); }
.tp-portada__rej { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.tp-portada h1 { margin: 0 0 1.1rem; font-family: var(--titulos); font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.tp-portada__texto > p { color: #e6eaff; }
.tp-portada strong { color: var(--sol); }
.tp-intro { display: grid; gap: 0.35rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.tp-intro li { position: relative; padding-left: 1.6rem; }
.tp-intro li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sol); font-weight: 700; }
.tp-portada__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.4rem; }
.tp-portada__foto { position: relative; margin: 0; }
.tp-portada__foto img { width: 100%; aspect-ratio: 1380 / 752; object-fit: cover; border-radius: 28px; border: 6px solid rgba(255, 255, 255, 0.92); box-shadow: 0 30px 50px -24px rgba(5, 10, 50, 0.8); }
.tp-portada__sello { position: absolute; left: -14px; bottom: -14px; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--sol); color: var(--tinta); font-family: var(--titulos); font-size: 1.15rem; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); transform: rotate(-12deg); }

/* índice */
.tp-indice { padding: 0.4rem 0 1.4rem; }
.tp-indice__t { margin: 0 0 0.6rem; color: var(--tinta-2); font-family: var(--titulos); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tp-indice__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tp-indice__lista a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); color: var(--tinta); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; }
.tp-indice__lista a:hover { border-color: var(--azul-real); color: var(--azul-real); background: var(--azul-tinte); }

/* ---------- secciones ---------- */

.tp-seccion { padding: clamp(2.4rem, 5vw, 3.8rem) 0; }
.tp-seccion--tinte { background: var(--azul-tinte); }
.tp-seccion__cab { margin-bottom: 1.4rem; }
.tp-seccion__pastilla { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; padding: 0.25rem 0.8rem 0.25rem 0.25rem; border-radius: 999px; background: var(--azul-claro); color: var(--azul-real); font-family: var(--titulos); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tp-seccion__pastilla b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--azul-real); color: var(--blanco); font-size: 0.72rem; }
.tp-seccion__cab h2 { margin: 0; max-width: 820px; color: var(--azul-noche); font-family: var(--titulos); font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.tp-seccion__cuerpo { max-width: 1000px; }
.tp-seccion__cuerpo > :last-child { margin-bottom: 0; }

.tp-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.tp-tarjetas:last-child { margin-bottom: 0; }
.tp-tarjeta { min-width: 0; padding: 1.3rem 1.4rem; border-radius: 20px; background: var(--blanco); border: 1px solid var(--borde); box-shadow: 0 14px 30px -24px rgba(11, 18, 64, 0.5); }
.tp-seccion--tinte .tp-tarjeta { border-color: #d6dcf6; }
.tp-tarjeta--ancha { grid-column: 1 / -1; }
.tp-tarjeta h3 { margin: 0 0 0.7rem; padding-bottom: 0.6rem; border-bottom: 3px solid var(--sol); color: var(--azul-noche); font-family: var(--titulos); font-size: 1.12rem; font-weight: 700; line-height: 1.3; display: inline-block; }
.tp-tarjeta > :last-child { margin-bottom: 0; }

.tp-llamado { margin: 1.5rem 0 0; }

.tp-lista { display: grid; gap: 0.45rem; margin: 0 0 1.05rem; padding: 0; list-style: none; }
.tp-lista li { position: relative; padding-left: 1.6rem; line-height: 1.55; }
.tp-lista li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45em; width: 0.8rem; height: 0.8rem; border-radius: 4px; background: var(--azul-real); box-shadow: inset 0 0 0 3px var(--azul-claro); }

.tp-pasos { display: grid; gap: 0.55rem; margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: tp-p; }
.tp-pasos li { position: relative; padding: 0.65rem 0.9rem 0.65rem 3.2rem; border-radius: 14px; background: var(--azul-tinte); counter-increment: tp-p; line-height: 1.5; }
.tp-seccion--tinte .tp-pasos li { background: var(--blanco); }
.tp-pasos li::before { content: counter(tp-p); position: absolute; left: 0.7rem; top: 0.6rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--sol); color: var(--tinta); font-family: var(--titulos); font-size: 0.85rem; font-weight: 800; }

.tp-cuadro { margin: 1rem 0 1.2rem; overflow-x: auto; border-radius: 16px; border: 1px solid var(--borde); background: var(--blanco); -webkit-overflow-scrolling: touch; }
.tp-cuadro table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.tp-cuadro--ancho table { min-width: 540px; }
.tp-cuadro thead th { padding: 0.8rem 1rem; background: var(--azul-real); color: var(--blanco); font-family: var(--titulos); font-size: 0.82rem; font-weight: 700; text-align: left; }
.tp-cuadro tbody th,
.tp-cuadro tbody td,
.tp-cuadro tfoot th,
.tp-cuadro tfoot td { padding: 0.7rem 1rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.tp-cuadro tbody tr:nth-child(even) { background: var(--azul-tinte); }
.tp-cuadro tbody th { color: var(--azul-noche); font-weight: 700; }
.tp-cuadro tbody tr:hover { background: #fff8cc; }
.tp-cuadro tfoot { background: var(--sol); }
.tp-cuadro tfoot th,
.tp-cuadro tfoot td { color: var(--tinta); font-weight: 800; }

.tp-dudas { display: grid; gap: 0.7rem; }
.tp-dudas__item { border-radius: 18px; background: var(--blanco); border: 1px solid var(--borde); overflow: hidden; }
.tp-dudas__item[open] { border-color: var(--azul-real); box-shadow: 0 14px 30px -24px rgba(26, 47, 214, 0.8); }
.tp-dudas__item summary { display: flex; align-items: center; gap: 0.9rem; min-height: 62px; padding: 0.8rem 1.1rem; list-style: none; cursor: pointer; }
.tp-dudas__item summary::-webkit-details-marker { display: none; }
.tp-dudas__item summary::after { content: ""; flex-shrink: 0; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; transition: transform 0.2s ease; background: radial-gradient(circle, var(--azul-real) 0 3px, transparent 4px), var(--azul-claro); }
.tp-dudas__item[open] summary::after { background: radial-gradient(circle, var(--tinta) 0 3px, transparent 4px), var(--sol); transform: scale(1.1); }
.tp-dudas__n { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--azul-real); color: var(--blanco); font-family: var(--titulos); font-weight: 800; }
.tp-dudas__q { color: var(--azul-noche); font-family: var(--titulos); font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.tp-dudas__r { margin: 0; padding: 0 1.1rem 1.1rem calc(1.1rem + 32px + 0.9rem); color: var(--tinta-2); }

/* ---------- pie ---------- */

.tp-pie { background: var(--azul-noche); color: #cdd4ff; }
.tp-pie__rej { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 2rem; align-items: start; padding: 2.8rem 0 1.6rem; }
.tp-pie__edad { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; font-size: 0.95rem; }
.tp-pie__18 { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sol); color: var(--tinta); font-family: var(--titulos); font-size: 0.8rem; font-weight: 800; }
.tp-pie__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; margin: 0; padding: 0; list-style: none; }
.tp-pie__lista a { display: inline-flex; align-items: center; min-height: 40px; color: #cdd4ff; text-decoration: none; }
.tp-pie__lista a:hover { color: var(--sol); }
.tp-pie__ctas { display: grid; gap: 0.8rem; justify-items: start; }
.tp-pie__copy { margin-top: 0; margin-bottom: 0; padding: 1rem 0 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.88rem; }

.tp-subir { position: fixed; right: 1rem; bottom: 1rem; z-index: 250; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--azul-real); color: var(--blanco); font-size: 1.2rem; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(11, 18, 64, 0.8); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; }
.tp-subir.tp-subir--ver { opacity: 1; visibility: visible; }

/* ---------- adaptación ---------- */

@media (max-width: 1100px) {
  .tp-nav { display: none; }
  .tp-menu { display: grid; }
  .tp-barra__cta { margin-left: auto; }
}

@media (max-width: 880px) {
  .tp-portada__rej { grid-template-columns: minmax(0, 1fr); }
  .tp-portada__foto { order: -1; }
  .tp-portada__sello { width: 70px; height: 70px; font-size: 0.95rem; left: auto; right: -6px; bottom: -10px; }
  .tp-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .tp-pie__rej { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  :root { --barra: 60px; }
  body { font-size: 1.03rem; }
  .tp-logo__ec { display: none; }
  .tp-barra__cta { padding: 0.45rem 0.85rem; font-size: 0.8rem; }
  .tp-portada__ctas .tp-boton,
  .tp-llamado .tp-boton { width: 100%; }
  .tp-tarjeta { padding: 1.05rem 0.95rem; }
  .tp-desplegable__lista { grid-template-columns: minmax(0, 1fr); }
  .tp-pie__lista { grid-template-columns: minmax(0, 1fr); }
  .tp-dudas__r { padding-left: 1.1rem; }
}