/* ==========================================================================
   Desafío "3 minutos con Jesucristo" — theme.css  (Campus Instituto de Religión)
   Drop-in for the Odoo module. Fonts: Anton (display) + DM Sans (UI) + Cormorant Garamond italic (accents).
   Holo card markup:
     <div class="card [silver|gold|back]"><img src="...">
       <div class="holo"></div><div class="diff"></div><div class="pearl"></div><div class="glare"></div></div>
   Drive the shine with CSS vars --mx/--my (pointer %) and --posx/--posy (foil offset %); see holo-card.html.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Cormorant+Garamond:ital,wght@1,500;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');
:root{
  --burg:#8B0E3E; --burg-d:#4a0620; --burg-l:#c23a6c;
  --ink:#0c0a0b; --ink2:#161113; --cream:#f3e9dc; --muted:#a8998f;
  --gold:#d9b25f; --gold-l:#f5dc9a; --gold-d:#8a6a2a;
  --silver:#c9ccd3; --silver-d:#7d828c;
  --display:'Anton',Impact,sans-serif; --sans:'DM Sans',system-ui,sans-serif; --serif:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}

.desafio{font-family:var(--sans);color:var(--cream);-webkit-font-smoothing:antialiased}
.desafio,.phone{position:relative;width:390px;height:844px;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 38%, rgba(139,14,62,.30), transparent 65%),
    radial-gradient(90% 50% at 50% 110%, rgba(217,178,95,.10), transparent 60%),
    linear-gradient(180deg,#120d0f 0%,#0b090a 100%);
}
/* felt / paper grain */
.desafio::before,.phone::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
/* vignette */
.desafio::after,.phone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.65) 100%);}
.desafio > *,.phone > *{position:relative;z-index:1}


.eyebrow{font:700 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;line-height:.92}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:500}
.gold-text{background:linear-gradient(180deg,#fff4cf 0%,#f5dc9a 40%,#c9983f 75%,#f5dc9a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.09);border-radius:20px}
/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font:600 12.5px/1 var(--sans);color:var(--cream);white-space:nowrap}
.chip.gold{background:linear-gradient(180deg,rgba(217,178,95,.22),rgba(217,178,95,.08));border-color:rgba(217,178,95,.45);color:var(--gold-l)}
.chip.burg{background:linear-gradient(180deg,rgba(194,58,108,.35),rgba(139,14,62,.25));border-color:rgba(194,58,108,.55)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:16px;font:700 16px/1 var(--sans);letter-spacing:.01em;color:#fff;border:0;width:100%}
.btn.primary{background:linear-gradient(180deg,#a8164e 0%,var(--burg) 55%,#6d0a30 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(245,220,154,.35), 0 10px 30px -8px rgba(139,14,62,.8), 0 2px 0 #3e0519}
.btn.ghost{background:rgba(243,233,220,.06);border:1px solid rgba(243,233,220,.22);color:var(--cream)}


/* ================= CARD ================= */
.card{--mx:50%;--my:50%;--posx:50%;--posy:50%;--hyp:.5;
  position:relative;aspect-ratio:600/843;border-radius:4.2%/3%;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.9), 0 12px 24px -12px rgba(0,0,0,.8)}
.card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .face{position:absolute;inset:0}
/* rainbow foil */
.card .holo{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:color-dodge;opacity:.34;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 48%,rgba(0,0,0,.25) 35%,#000 100%);mask:radial-gradient(ellipse 70% 60% at 50% 48%,rgba(0,0,0,.25) 35%,#000 100%);
  background:
    repeating-linear-gradient(0deg,
      hsl(2,100%,73%) 0%, hsl(53,100%,69%) 5%, hsl(93,100%,69%) 10%, hsl(176,100%,76%) 15%,
      hsl(228,100%,74%) 20%, hsl(283,100%,73%) 25%, hsl(2,100%,73%) 30%),
    repeating-linear-gradient(128deg,
      #0e152e 0%, hsl(180,10%,60%) 3.8%, hsl(180,29%,66%) 4.5%, hsl(180,10%,60%) 5.2%, #0e152e 10%, #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(0,0,0,.1) 12%, rgba(0,0,0,.15) 20%, rgba(0,0,0,.25) 120%);
  background-blend-mode:exclusion,hue,hard-light;
  background-size:200% 700%, 300% 100%, 200% 100%;
  background-position:0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
  filter:brightness(.8) contrast(1.8) saturate(.6)}
/* fine diffraction lines */
.card .diff{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:overlay;opacity:.55;
  background:
    repeating-linear-gradient(118deg, rgba(255,255,255,0) 0 1.5px, rgba(255,255,255,.22) 1.5px 2.2px, rgba(0,0,0,0) 2.2px 4px),
    repeating-linear-gradient(28deg, rgba(255,255,255,0) 0 3px, rgba(255,255,255,.10) 3px 3.6px);
  -webkit-mask:linear-gradient(115deg, transparent calc(var(--posx) - 40%), #000 var(--posx), transparent calc(var(--posx) + 40%));
          mask:linear-gradient(115deg, transparent calc(var(--posx) - 40%), #000 var(--posx), transparent calc(var(--posx) + 40%))}
/* pearlescent diagonal sweep */
.card .pearl{position:absolute;inset:-20%;z-index:5;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:linear-gradient(115deg, transparent calc(var(--posx) - 30%), rgba(255,240,250,.0) calc(var(--posx) - 18%),
     rgba(255,236,246,.85) calc(var(--posx) - 4%), rgba(214,244,255,.9) var(--posx), rgba(255,250,220,.75) calc(var(--posx) + 5%),
     transparent calc(var(--posx) + 20%))}
.card .glare{position:absolute;inset:0;z-index:6;pointer-events:none;mix-blend-mode:overlay;opacity:.55;
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.85) 8%, rgba(255,255,255,.45) 22%, rgba(0,0,0,.45) 90%)}

/* metal variants */
.card.silver{background:
   linear-gradient(135deg,#eef0f4 0%,#9aa0aa 18%,#e6e9ee 34%,#7e848f 52%,#d9dce2 70%,#8b909a 86%,#f2f3f6 100%)}
.card.gold{background:
   linear-gradient(135deg,#fff1c2 0%,#b8862f 18%,#ffe9a8 34%,#9c6c1f 52%,#f7d98a 70%,#a57625 86%,#fff4cf 100%)}
.card.silver .holo{opacity:.3;filter:brightness(.9) contrast(1.6) saturate(.2)}
.card.gold .holo{opacity:.35;filter:brightness(.9) contrast(2) saturate(.6) sepia(.3)}
.metal-inner{position:absolute;inset:5.5%;border-radius:3%/2.2%;overflow:hidden}
.card.silver .metal-inner{background:radial-gradient(90% 70% at 50% 35%,#4a4f59 0%,#23262c 60%,#15171b 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35), inset 0 0 30px rgba(0,0,0,.6)}
.card.gold .metal-inner{background:radial-gradient(90% 70% at 50% 38%,#6b4a14 0%,#2e1f08 62%,#1a1105 100%);box-shadow:inset 0 0 0 1.5px rgba(255,235,170,.55), inset 0 0 30px rgba(0,0,0,.6)}

/* card back */
.card.back{background:#5d0828}
.back-face{position:absolute;inset:0;
  background:
   radial-gradient(60% 40% at 50% 50%, rgba(255,200,140,.18), transparent 70%),
   repeating-linear-gradient(45deg, rgba(245,220,154,.13) 0 1px, transparent 1px 14px),
   repeating-linear-gradient(-45deg, rgba(245,220,154,.13) 0 1px, transparent 1px 14px),
   linear-gradient(160deg,#9b1447 0%,#6c0a31 55%,#3f041b 100%)}
.back-frame{position:absolute;inset:5%;border-radius:3.5%/2.5%;border:1.5px solid rgba(245,220,154,.7);
  box-shadow:inset 0 0 0 4px rgba(63,4,27,.9), inset 0 0 0 5px rgba(245,220,154,.35)}
.back-med{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#4a0620 0 55%,transparent 56%),conic-gradient(from 0deg, rgba(245,220,154,.9) 0 2deg, transparent 2deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 69%, transparent 70%);mask:radial-gradient(circle,#000 69%,transparent 70%);
  display:flex;align-items:center;justify-content:center;flex-direction:column}
.back-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50%;aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(245,220,154,.85);box-shadow:0 0 0 5px rgba(74,6,32,1),0 0 0 6px rgba(245,220,154,.4);display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at 50% 40%,#7d0d38,#3f041b)}
.corner-gem{position:absolute;width:9%;aspect-ratio:1;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold-l),var(--gold-d));box-shadow:0 0 6px rgba(245,220,154,.6)}

/* silhouette */
.sil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:78%;opacity:.9}
.lock{width:22px;height:22px}

/* card back text */
.back-title{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:700 .8em var(--sans);letter-spacing:.18em;color:#f5dc9a;z-index:2}
.back-title b{display:block;font-family:var(--display);font-weight:400;font-size:1.9em;letter-spacing:.06em}
.card.back .holo{opacity:.28}
/* motion: slow idle sweep when not interacting; respects reduced motion */
@keyframes holo-idle{0%,100%{--posx:30%;--posy:30%;--mx:30%;--my:25%}50%{--posx:70%;--posy:65%;--mx:70%;--my:70%}}
@property --posx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --posy{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --mx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --my{syntax:'<percentage>';inherits:true;initial-value:50%}
.card.idle{animation:holo-idle 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.card.idle{animation:none}}