/* Santa Orla · calibración visual final · bloque B · 2026-08-31 */

.portrait-brand-trace{display:none!important;position:absolute!important;pointer-events:none!important;z-index:0!important}

/* Sello decorativo a caballo entre #packs y #como-funciona. height:0 lo
   convierte en un ancla sin alto propio (no empuja layout); el ::before
   se centra sobre esa ancla con translate(-50%,-50%), asi que queda
   siempre justo en la costura entre las dos secciones, sin importar el
   alto real de cada una. z-index para pintar por encima de #como-funciona
   (que va despues en el DOM y si no, lo taparia por abajo). */
.seam-sticker{display:none;position:relative;height:0;pointer-events:none}
/* Ojo: desde 768px main.phone es display:contents y sus secciones pasan a
   ser items directos del grid de 100 columnas de .integrated-page (en
   base.css), con #packs en grid-row:6 y #como-funciona en grid-row:7. Sin
   grid-row/column explicito este div cae en el auto-placement por defecto
   (fila 1, arriba de todo), no donde esta en el HTML. align-self:start en
   la fila 7 lo deja pegado a su borde superior = la costura exacta. */

/* Móvil: se conserva la arquitectura V6; sólo se corrige la foto de orla a formato vertical. */
@media (max-width:767px){
  #retrato-individual .portrait-sequence{
    display:block!important;
    width:min(72vw,300px)!important;
    max-width:300px!important;
    aspect-ratio:2/3!important;
    height:auto!important;
    margin:12px auto 22px!important;
    overflow:hidden!important;
    border-radius:0!important;
  }
  #retrato-individual .portrait-sequence .portrait-frame{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 28%!important;
  }
}

/* Desde tablet/desktop sólo existe la secuencia vertical de escritorio. */
@media (min-width:768px){
  #retrato-individual .portrait-sequence{display:none!important}
  #retrato-individual .portrait-sequence-desktop{display:block!important;position:relative!important;overflow:hidden!important}
  #retrato-individual .portrait-sequence-desktop .portrait-frame-desktop{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 30%!important;transform:none!important}
}

@keyframes so-portrait-cycle{0%,19.99%{opacity:1}20%,100%{opacity:0}}

/* Tablet / desktop estrecho: misma jerarquía, escalada. */
@media (min-width:1024px) and (max-width:1359px){
  #retrato-individual{position:relative!important;overflow:visible!important;min-height:700px!important;padding:0 0 38px!important;display:grid!important;grid-template-columns:280px 390px!important;justify-content:center!important;align-items:stretch!important;column-gap:60px!important;background:#e7a29f!important}
  #retrato-individual .portrait-opening{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:280px!important;padding:48px 0 0!important;background:transparent!important}
  #retrato-individual .portrait-details{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:390px!important;padding:88px 0 0!important;text-align:center!important;background:transparent!important}
  #retrato-individual .portrait-heading,#retrato-individual .fear-sticker-text,#retrato-individual .portrait-sequence-desktop{width:280px!important;max-width:280px!important;margin-left:0!important;margin-right:0!important}
  #retrato-individual .portrait-heading .eyebrow{margin:0!important;width:100%!important;text-align:center!important;color:#e75227!important;font-size:36px!important;line-height:.9!important}
  /* Ancho propio (no comparte con foto/eyebrow) para poder agrandar la
     letra sin que envuelva a 2 lineas (pedido 2026-09-13). */
  #retrato-individual .portrait-intro{width:310px!important;max-width:310px!important;margin:3px auto 8px!important;text-align:center!important;font-size:20px!important;line-height:1.02!important;white-space:nowrap!important}
  #retrato-individual .fear-sticker-text{position:relative!important;z-index:2!important;align-items:center!important;margin:8px 0 -14px!important;text-align:center!important;font-size:34px!important;line-height:1.02!important;color:#f9f3dd!important;-webkit-text-stroke:0!important;paint-order:normal!important;transform:rotate(-5deg)!important;
    /* Invertido (pedido 2026-09-13): antes relleno naranja + anillo ivory,
       ahora relleno ivory + anillo naranja (rojo afuera, blanco adentro). */
    text-shadow:
      6px 0 0 var(--orange),5.54px 2.3px 0 var(--orange),4.24px 4.24px 0 var(--orange),2.3px 5.54px 0 var(--orange),
      0 6px 0 var(--orange),-2.3px 5.54px 0 var(--orange),-4.24px 4.24px 0 var(--orange),-5.54px 2.3px 0 var(--orange),
      -6px 0 0 var(--orange),-5.54px -2.3px 0 var(--orange),-4.24px -4.24px 0 var(--orange),-2.3px -5.54px 0 var(--orange),
      0 -6px 0 var(--orange),2.3px -5.54px 0 var(--orange),4.24px -4.24px 0 var(--orange),5.54px -2.3px 0 var(--orange)!important}
  #retrato-individual .portrait-sequence-desktop{height:420px!important;aspect-ratio:2/3!important;background:#e7a29f!important}
  #retrato-individual .portrait-claim{width:390px!important;max-width:390px!important;margin:0 auto 20px!important;font-size:34px!important;line-height:1.02!important}
  #retrato-individual .portrait-claim .portrait-panic{margin-bottom:20px!important;font-size:38px!important;line-height:1!important;transform:rotate(-2deg)!important}
  #retrato-individual .portrait-subclaim{width:390px!important;max-width:390px!important;margin:0 auto!important;font-size:30px!important;line-height:1.08!important;color:#f9f3dd!important}
  #retrato-individual .portrait-more{width:350px!important;max-width:350px!important;margin-top:20px!important}
  #retrato-individual .portrait-highlight{width:360px!important;max-width:360px!important;margin-top:12px!important;font-size:28px!important;line-height:1.08!important;text-align:left!important}
  #retrato-individual .portrait-tips-cta{width:350px!important;max-width:350px!important;margin-top:16px!important}
}

/* Portátil grande / desktop: composición final exacta, sin stickers todavía. */
@media (min-width:1360px){
  #retrato-individual{position:relative!important;overflow:visible!important;min-height:780px!important;padding:0 0 42px!important;display:grid!important;grid-template-columns:326px 430px!important;justify-content:center!important;align-items:stretch!important;column-gap:110px!important;background:#e7a29f!important}
  #retrato-individual .portrait-opening,#retrato-individual .portrait-details{min-width:0!important;background:transparent!important}
  #retrato-individual .portrait-opening{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:326px!important;padding:54px 0 0!important}
  #retrato-individual .portrait-details{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:430px!important;padding:100px 0 0!important;text-align:center!important}
  #retrato-individual .portrait-heading,#retrato-individual .fear-sticker-text,#retrato-individual .portrait-sequence-desktop{width:326px!important;max-width:326px!important;margin-left:0!important;margin-right:0!important}
  #retrato-individual .portrait-heading .eyebrow{margin:0!important;width:100%!important;text-align:center!important;color:#e75227!important;font-size:42px!important;line-height:.9!important;letter-spacing:-.035em!important}
  #retrato-individual .portrait-intro{width:370px!important;max-width:370px!important;margin:3px auto 10px!important;text-align:center!important;color:#35111b!important;font-size:24px!important;line-height:1.02!important;letter-spacing:-.015em!important;white-space:nowrap!important}
  #retrato-individual .fear-sticker-text{position:relative!important;z-index:2!important;align-items:center!important;margin:10px 0 -16px!important;text-align:center!important;font-size:41px!important;line-height:1.02!important;color:#f9f3dd!important;-webkit-text-stroke:0!important;paint-order:normal!important;transform:rotate(-5deg)!important;
    /* Invertido (pedido 2026-09-13): antes relleno naranja + anillo ivory,
       ahora relleno ivory + anillo naranja (rojo afuera, blanco adentro). */
    text-shadow:
      6px 0 0 var(--orange),5.54px 2.3px 0 var(--orange),4.24px 4.24px 0 var(--orange),2.3px 5.54px 0 var(--orange),
      0 6px 0 var(--orange),-2.3px 5.54px 0 var(--orange),-4.24px 4.24px 0 var(--orange),-5.54px 2.3px 0 var(--orange),
      -6px 0 0 var(--orange),-5.54px -2.3px 0 var(--orange),-4.24px -4.24px 0 var(--orange),-2.3px -5.54px 0 var(--orange),
      0 -6px 0 var(--orange),2.3px -5.54px 0 var(--orange),4.24px -4.24px 0 var(--orange),5.54px -2.3px 0 var(--orange)!important}
  #retrato-individual .portrait-sequence-desktop{height:488px!important;aspect-ratio:2/3!important;background:#e7a29f!important}
  #retrato-individual .portrait-claim{width:430px!important;max-width:430px!important;margin:0 auto 24px!important;font-size:41px!important;line-height:1.02!important;letter-spacing:-.015em!important}
  #retrato-individual .portrait-claim .portrait-panic{margin-bottom:24px!important;font-size:44px!important;line-height:1!important;transform:rotate(-2deg)!important}
  #retrato-individual .portrait-subclaim{width:430px!important;max-width:430px!important;margin:0 auto!important;font-size:35px!important;line-height:1.08!important;letter-spacing:-.03em!important;color:#f9f3dd!important}
  #retrato-individual .portrait-more{width:380px!important;max-width:380px!important;margin-top:24px!important}
  #retrato-individual .portrait-highlight{width:390px!important;max-width:390px!important;margin-top:14px!important;font-size:33px!important;line-height:1.08!important;text-align:left!important}
  #retrato-individual .portrait-tips-cta{width:380px!important;max-width:380px!important;margin-top:18px!important}
}

/* La animación queda definida una sola vez para todos los desktop/tablet. */
@media (min-width:768px){
  #retrato-individual .portrait-frame-desktop{opacity:0;animation:so-portrait-cycle 5s steps(1) infinite!important;will-change:opacity!important}
  #retrato-individual .portrait-frame-desktop:nth-child(1){animation-delay:0s!important}
  #retrato-individual .portrait-frame-desktop:nth-child(2){animation-delay:1s!important}
  #retrato-individual .portrait-frame-desktop:nth-child(3){animation-delay:2s!important}
  #retrato-individual .portrait-frame-desktop:nth-child(4){animation-delay:3s!important}
  #retrato-individual .portrait-frame-desktop:nth-child(5){animation-delay:4s!important}
}

/* Sólo panorámico: trazado oficial completo en el margen. */
@media (min-width:1800px){
  #retrato-individual .portrait-brand-trace-left{
    display:block!important;
    width:717px!important;
    height:936px!important;
    left:-426px!important;
    top:100px!important;
    transform:rotate(-24deg)!important;
    background-color:#f9f3dd!important;opacity:.88!important;
    -webkit-mask:url('../../images/marca/aprobados-20260829/logo-03.svg') center/contain no-repeat!important;
    mask:url('../../images/marca/aprobados-20260829/logo-03.svg') center/contain no-repeat!important;
  }
  #retrato-individual .portrait-brand-trace-right{
    display:block!important;
    width:717px!important;
    height:936px!important;
    right:-400px!important;
    top:-100px!important;
    transform:rotate(10deg)!important;
    background-color:#f9f3dd!important;opacity:.88!important;
    -webkit-mask:url('../../images/marca/aprobados-20260829/santa-orla-beige-2-lineas.svg') center/contain no-repeat!important;
    mask:url('../../images/marca/aprobados-20260829/santa-orla-beige-2-lineas.svg') center/contain no-repeat!important;}
}

/* 2026-09-04: bajado de 1800 a 1500 — a partir de 1440px .integrated-page
   (max-width:1440px) deja de ocupar el 100% del viewport y aparece margen
   lateral real donde este sticker puede flotar sin solaparse con el contenido. */
@media (min-width:1500px){
  .seam-sticker-packs-how{
    display:block!important;
    grid-column:1/101!important;grid-row:7!important;align-self:start!important;
  }
  .seam-sticker-packs-how::before{
    content:''!important;
    display:block!important;
    position:absolute!important;
    top:0!important;left:112%!important;
    transform:translate(-50%,-50%) rotate(20deg)!important;
    width:600px!important;height:600px!important;
    z-index:5!important;
    background-color:var(--orange)!important;opacity:.9!important;
    -webkit-mask:url('../../images/marca/aprobados-20260829/circulo-naranja.svg') center/contain no-repeat!important;
    mask:url('../../images/marca/aprobados-20260829/circulo-naranja.svg') center/contain no-repeat!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #retrato-individual .portrait-frame-desktop{animation:none!important;opacity:0!important}
  #retrato-individual .portrait-frame-desktop:first-child{opacity:1!important}
}

/* Tablet mínimo: recorta el residuo horizontal heredado del carril de “Com funciona”. */
@media (min-width:768px) and (max-width:799px){
  #como-funciona{overflow:hidden!important}
}

/* 2026-08-31 · correcciones de revisión PATCH-02 */
@media (min-width:768px){
  #retrato-individual{
    background:#e7a29f!important;
    box-shadow:0 0 0 100vmax #e7a29f!important;
    clip-path:inset(0 -100vmax)!important;
  }
  #retrato-individual .portrait-sequence,
  #retrato-individual .portrait-sequence-desktop,
  #retrato-individual .portrait-frame,
  #retrato-individual .portrait-frame-desktop{background:#e7a29f!important}
}

@media (min-width:1024px){
  /* Título, entrada y pensamiento centrados respecto a la fotografía. */
  #retrato-individual .portrait-opening{align-items:center!important}
  #retrato-individual .portrait-heading,
  #retrato-individual .portrait-intro,
  #retrato-individual .fear-sticker-text,
  #retrato-individual .portrait-sequence-desktop{
    align-self:center!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important;
  }

}

/* Reordenar .portrait-details (pedido 2026-09-13): LLEGIR MES pasa a ir
   entre el subclaim y el highlight, y el boton CTA al final. .portrait-
   details es display:flex (no grid), asi que se resuelve con order, sin
   tocar el HTML ni el orden real del DOM. Desde 768px (no solo 1024px):
   la composicion "desktop" del claim/badge ya arranca ahi, y el orden
   original (subclaim, highlight, cta, more) se veia tambien en esa
   franja 768-1023 si solo se corregia desde 1024. */
@media (min-width:768px){
  #retrato-individual .portrait-claim{order:1!important}
  #retrato-individual .portrait-subclaim{order:2!important}
  #retrato-individual .portrait-more{order:3!important}
  #retrato-individual .portrait-highlight{order:4!important}
  #retrato-individual .portrait-tips-cta{order:5!important}
}