/* Exclivia · portada3.css — portada v3 «Una sola cuenta. Todo un mundo exclusivo.»
 * Solo héroe. Claro y cálido a propósito (es la propuesta de marca); el oro sale
 * de los tokens del tema. Móvil primero; desde 62rem copy a la izquierda y la
 * constelación de tarjetas a la derecha, todo en una pantalla.
 * Movimiento: entrada escalonada, tarjetas que flotan, hilos con luz y brillo
 * dorado. Todo se apaga con prefers-reduced-motion.
 */
body:has(.p3) > .exc-topbar, body:has(.p3) > footer, body:has(.p3) .exc-footer { display: none !important; }
body:has(.p3) { background: #fffdf8; padding-top: 0 !important; }
.p3 {
  --p3-oro-1: #f3cf6e; --p3-oro-2: #d9a42c; --p3-oro-3: #a8741a;
  --p3-tinta: #151412; --p3-suave: #5d5a55; --p3-borde: rgba(199,146,34,.28);
  min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip;
  color: var(--p3-tinta); font-family: var(--exc-font-display);
  background:
    radial-gradient(60rem 40rem at 78% 40%, rgba(243,207,110,.30), transparent 65%),
    radial-gradient(40rem 30rem at 0% 0%, rgba(243,207,110,.14), transparent 60%),
    #fffdf8;
}
.p3 a { text-decoration: none; color: inherit; }
.p3 img { display: block; max-width: 100%; }

/* ── Barra ─────────────────────────────────────────────────────────────── */
.p3-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,.05); background: rgba(255,253,248,.8); backdrop-filter: blur(8px); }
.p3-brand { flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.p3-gema { width: 2rem; height: 2rem; }
@media (max-width: 24rem) { .p3-brand-t { font-size: 1.4rem; } .p3-gema { width: 1.7rem; height: 1.7rem; } .p3-top { padding-inline: .9rem; } }
.p3-brand-t { font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--p3-oro-1), var(--p3-oro-2) 55%, var(--p3-oro-3));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.p3-nav { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.p3-langs { display: inline-flex; gap: .15rem; }
.p3-langs a { min-width: 36px; min-height: 36px; display: grid; place-items: center; border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--p3-suave); }
.p3-langs a[aria-current] { background: rgba(199,146,34,.16); color: var(--p3-oro-3); }
.p3-ya { display: none; color: var(--p3-suave); font-size: .95rem; }
.p3-entrar { display: inline-flex; align-items: center; flex: none; white-space: nowrap; min-height: 44px; padding: 0 1.2rem; border-radius: 999px;
  border: 1.5px solid var(--p3-oro-2); color: var(--p3-oro-3) !important; font-weight: 600; transition: background .2s, transform .2s; }
.p3-entrar:hover { background: rgba(243,207,110,.22); transform: translateY(-1px); }
@media (min-width: 40rem) { .p3-ya { display: inline; } }

/* ── Héroe ─────────────────────────────────────────────────────────────── */
.p3-hero { flex: 1; display: grid; grid-template-columns: minmax(0,1fr); gap: 2.25rem;
  align-items: center; padding: 2rem 1.25rem 2.5rem; max-width: 92rem; width: 100%; margin: 0 auto; }
.p3-kicker { margin: 0 0 .6rem; font-size: .8rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--p3-oro-3); }
.p3-h1 { margin: 0; font-size: clamp(2.4rem, 10vw, 5.2rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.p3-h1 span { display: block; }
.p3-oro { background: linear-gradient(100deg, var(--p3-oro-3) 0%, var(--p3-oro-1) 30%, var(--p3-oro-2) 55%, var(--p3-oro-3) 80%, var(--p3-oro-1) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.p3-lead { margin: 1.25rem 0 1.5rem; max-width: 34rem; font-size: clamp(1.05rem, 2.4vw, 1.4rem); line-height: 1.5; color: var(--p3-suave); font-weight: 300; }

.p3-promo { display: flex; align-items: center; gap: 1rem; max-width: 36rem; padding: .8rem 1.25rem; border-radius: 1.1rem;
  border: 1.5px solid var(--p3-borde); background: linear-gradient(180deg, #fffaf0, #fff4dc);
  box-shadow: 0 6px 22px -10px rgba(199,146,34,.45); transition: transform .25s, box-shadow .25s; }
.p3-promo:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(199,146,34,.6); }
.p3-promo img { width: 3.2rem; height: auto; flex: none; }
.p3-promo span { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.p3-promo b { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.p3-promo small { font-size: 1rem; color: var(--p3-suave); font-weight: 300; }
.p3-promo svg { width: 1.5rem; height: 1.5rem; color: var(--p3-oro-2); flex: none; transition: transform .25s; }
.p3-promo:hover svg { transform: translateX(4px); }

.p3-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  margin-top: 1.1rem; min-height: 3.2rem; max-width: 100%; padding: 0 1.7rem; border-radius: 1rem; white-space: nowrap;
  font-size: clamp(1.05rem, 4.6vw, 1.4rem); font-weight: 500; color: #fff !important; letter-spacing: -.01em;
  background: linear-gradient(180deg, #d9a42c, #a8741a); text-shadow: 0 1px 2px rgba(80,50,0,.35);
  box-shadow: 0 10px 26px -8px rgba(168,116,26,.7), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .2s, box-shadow .2s; }
.p3-cta:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 32px -8px rgba(168,116,26,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.p3-cta svg { width: 1.3rem; height: 1.3rem; flex: none; transition: transform .25s; }
.p3-cta:hover svg { transform: translateX(5px); }
.p3-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
.p3-nota { margin: .8rem 0 0; color: var(--p3-suave); font-size: 1rem; font-weight: 300; }

.p3-conf { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.p3-conf li { display: inline-flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 500; }
.p3-conf img { width: 2.6rem; height: 2.6rem; padding: .55rem; object-fit: contain; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 14px -4px rgba(199,146,34,.5); }

/* ── Constelación ──────────────────────────────────────────────────────── */
.p3-mapa { position: relative; display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
.p3-hilos { display: none; }
.p3-card { margin: 0; border-radius: 1.2rem; background: #fff; border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 14px 34px -14px rgba(120,84,10,.35); overflow: hidden; }
.p3-card h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.p3-card p { margin: .2rem 0 0; font-size: .85rem; line-height: 1.35; color: var(--p3-suave); font-weight: 300; }
.p3-foto { padding: .55rem .55rem .85rem; }
.p3-foto > img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: .8rem; }
.p3-card-txt { display: flex; align-items: center; gap: .6rem; padding: .65rem .35rem 0; }
.p3-tile { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  background: linear-gradient(180deg, #2a2012, #120d05); box-shadow: inset 0 0 0 1px rgba(243,207,110,.35); }
.p3-tile img { width: 58%; }
.p3-foto.is-wallet > img { aspect-ratio: 5/3.4; }

.p3-cuenta { grid-column: 1 / -1; order: -1; padding: 1.1rem 1rem 1.2rem; text-align: center; }
.p3-cuenta h3 { font-size: 1.35rem; margin-top: .4rem; }
.p3-cuenta p { font-size: .95rem; }
.p3-anillo { position: relative; width: min(100%, 15rem); aspect-ratio: 1; margin: 0 auto; }
.p3-av { position: absolute; width: 31%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 6px 14px -4px rgba(120,84,10,.5); }
.p3-av.is-1 { left: 9%; top: 5%; }  .p3-av.is-2 { right: 9%; top: 5%; }
.p3-av.is-3 { left: -4%; top: 38%; } .p3-av.is-4 { right: -4%; top: 38%; }
.p3-av.is-5 { left: 9%; bottom: 3%; } .p3-av.is-6 { right: 9%; bottom: 3%; }
.p3-gema-c { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%,-50%); display: grid; place-items: center;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--p3-oro-1), 0 8px 24px -6px rgba(199,146,34,.7); }
.p3-gema-c img { width: 62%; }
.p3-sello { position: absolute; left: 56%; top: 62%; width: 11%; }

.p3-solo { grid-column: 1 / -1; position: relative; background: #17130b; color: #fff; border-color: rgba(243,207,110,.5); }
.p3-solo > img { width: 100%; aspect-ratio: 16/6; object-fit: cover; opacity: .95; }
.p3-solo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,7,2,.88) 0%, rgba(10,7,2,.55) 45%, transparent 75%); }
.p3-solo .p3-card-txt { z-index: 2; display: block; position: absolute; left: 1rem; bottom: .8rem; padding: 0; }
.p3-solo p { color: rgba(255,255,255,.85); }
.p3-solo h3 { font-size: 1.2rem; color: #ffe8a8; }

/* Escritorio: tres columnas como la propuesta, en cuadrícula (nada se encima) */
@media (min-width: 62rem) {
  .p3-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem; padding: 2rem 3rem 2.5rem; }
  .p3-top { padding: .9rem 3.5rem; }
  .p3-h1 { font-size: clamp(2.6rem, 4.9vw, 5.2rem); }
  .p3-cta { font-size: clamp(1.2rem, 1.7vw, 1.5rem); min-width: 20rem; padding: 0 2.4rem; }
  .p3-mapa { grid-template-columns: 1fr 1.28fr 1fr; grid-template-rows: auto auto auto; gap: 1rem; align-items: start; isolation: isolate; }
  .p3-mapa::before { content: ""; position: absolute; z-index: -1; inset: 3% 5% 8%; border-radius: 50%;
    border: 1.5px dashed rgba(217,164,44,.45); }
  .p3-mapa::after { content: ""; position: absolute; z-index: -1; inset: -6% -2%; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(243,207,110,.35), transparent); }
  .p3-hilos { display: none; }
  .p3-card { position: relative; width: auto; }
  .p3-moments { grid-area: 1 / 1; }
  .p3-viper   { grid-area: 1 / 3; }
  .p3-wallet  { grid-area: 2 / 1; }
  .p3-daclic  { grid-area: 2 / 3; }
  /* El centro abarca las dos primeras filas y queda a media altura, como en la propuesta. */
  .p3-cuenta  { grid-area: 1 / 2 / 3 / 3; order: 0; align-self: center; }
  .p3-solo    { grid-area: 3 / 2; align-self: start; margin-top: -.2rem; }
  .p3-foto { padding: .45rem .45rem .7rem; }
  .p3-foto > img { aspect-ratio: 1.75; }
  .p3-card-txt { gap: .5rem; padding: .55rem .3rem 0; }
  .p3-tile { width: 2.2rem; height: 2.2rem; border-radius: .65rem; }
  .p3-card h3 { font-size: clamp(.85rem, 1.05vw, 1rem); }
  .p3-card p { margin-top: .1rem; font-size: clamp(.66rem, .78vw, .78rem); line-height: 1.3; }
  .p3-cuenta { padding: 1rem .8rem 1.1rem; }
  .p3-cuenta h3 { font-size: clamp(1rem, 1.35vw, 1.3rem); }
  .p3-cuenta p { font-size: clamp(.72rem, .9vw, .85rem); }
  .p3-anillo { width: min(100%, 13.5rem); }
  .p3-solo > img { aspect-ratio: 16/7; object-position: 85% 50%; }
}

/* ── Movimiento ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Nada se anima (ni se ve a medias) hasta que las imágenes ya están decodificadas:
     portada3.js agrega `.is-listo`; sin JS, el <noscript> de la vista lo muestra todo. */
  .p3:not(.is-listo) :is(.p3-kicker, .p3-h1 span, .p3-lead, .p3-promo, .p3-cta, .p3-nota, .p3-conf li, .p3-card) { opacity: 0; animation: p3-sube .6s 3s both !important; }
  .p3:not(.is-listo) .p3-cta::after, .p3:not(.is-listo) .p3-hilos path { animation: none !important; }
  /* Respaldo: si el script no llega, a los 3 s todo se revela solo. */
  @keyframes p3-sube   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes p3-entra  { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes p3-flota  { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
  @keyframes p3-brilla { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
  @keyframes p3-barre  { 0%, 55% { left: -40%; } 100% { left: 140%; } }
  @keyframes p3-fluye  { to { stroke-dashoffset: -20; } }
  @keyframes p3-pulso  { 0% { box-shadow: 0 0 0 2px var(--p3-oro-1), 0 0 0 0 rgba(217,164,44,.55); }
                         100% { box-shadow: 0 0 0 2px var(--p3-oro-1), 0 0 0 1.6rem rgba(217,164,44,0); } }
  @keyframes p3-gira   { to { transform: rotate(360deg); } }
  @keyframes p3-late   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

  .p3-kicker, .p3-h1 span, .p3-lead, .p3-promo, .p3-cta, .p3-nota, .p3-conf li { opacity: 0; animation: p3-sube .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .p3-kicker { animation-delay: .05s; }
  .p3-h1 span:nth-child(1) { animation-delay: .15s; } .p3-h1 span:nth-child(2) { animation-delay: .25s; } .p3-h1 span:nth-child(3) { animation-delay: .35s; }
  .p3-lead { animation-delay: .5s; } .p3-promo { animation-delay: .6s; } .p3-cta { animation-delay: .7s; } .p3-nota { animation-delay: .8s; }
  .p3-conf li:nth-child(1) { animation-delay: .9s; } .p3-conf li:nth-child(2) { animation-delay: 1s; } .p3-conf li:nth-child(3) { animation-delay: 1.1s; }

  .p3-oro { animation: p3-sube .7s .35s cubic-bezier(.2,.7,.2,1) forwards, p3-brilla 5s 1s linear infinite; }
  .p3-cta::after { animation: p3-barre 3.4s 1.6s ease-in-out infinite; }

  .p3-card { opacity: 0; animation: p3-entra .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .p3-cuenta { animation-delay: .3s; } .p3-moments { animation-delay: .5s; } .p3-viper { animation-delay: .65s; }
  .p3-wallet { animation-delay: .8s; } .p3-daclic { animation-delay: .95s; } .p3-solo { animation-delay: 1.1s; }

  /* Flotan sin tocar `transform` (que usan para centrarse): la propiedad `translate` va aparte. */
  .p3-foto, .p3-cuenta, .p3-solo { animation-name: p3-entra, p3-flota; animation-duration: .8s, 6s;
    animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.2,.7,.2,1), ease-in-out; animation-fill-mode: forwards, none; }
  .p3-moments { animation-delay: .5s, 1.3s; } .p3-viper { animation-delay: .65s, 2.1s; } .p3-wallet { animation-delay: .8s, 3s; }
  .p3-daclic { animation-delay: .95s, 1.8s; } .p3-cuenta { animation-delay: .3s, 1.2s; } .p3-solo { animation-delay: 1.1s, 2.6s; }

  .p3-hilos path { animation: p3-fluye 1.1s linear infinite; }
  .p3-gema-c { animation: p3-pulso 2.6s ease-out infinite; }
  .p3-gema-c img { animation: p3-late 2.6s ease-in-out infinite; }
  .p3-sello { animation: p3-late 3s ease-in-out infinite; }
  .p3-av { animation: p3-late 5s ease-in-out infinite; }
  .p3-av.is-2 { animation-delay: .8s; } .p3-av.is-3 { animation-delay: 1.6s; } .p3-av.is-4 { animation-delay: 2.4s; }
  .p3-av.is-5 { animation-delay: 3.2s; } .p3-av.is-6 { animation-delay: 4s; }
  .p3-foto > img, .p3-solo > img { transition: transform .6s; }
  .p3-card:hover > img { transform: scale(1.05); }
}