/* Diseno Web v0.1?v=2 */
:root{
	--horo-cream:#f6f3ec;
	--horo-cream-2:#EDE6D6;
	--horo-green:#153a2c;
	--horo-green-dark:#16291F;
	--horo-gold:#C7A24A;
	--horo-gold-soft:#B99A4E;
	--horo-text-dark:#20301F;
	--cream:#f7f3eb;
	--green:#16392f;
	--gold:#c89a45;
	--border:#8d8d8d;
}

#horoApp{
  max-width:1000px;
  margin:0 auto;
  font-family:'Georgia', 'Times New Roman', serif;
  box-sizing:border-box;
}
#horoApp *{ box-sizing:border-box; }

#horoApp .horo-header{
  padding: 8px 4px 20px;
}
#horoApp .horo-header h2{
  font-family:'Georgia', serif;
  font-weight:700;
  color:var(--horo-green);
  font-size:28px;
  margin:0;
}
#horoApp .horo-header p{
  margin:2px 0 0;
  color:#6b6b63;
  font-size:14px;
}

/* ---------- GRID (desktop / tablet) ---------- */
#horoApp .horo-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
@media (max-width:900px){
  #horoApp .horo-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  #horoApp .horo-grid{ display:none; }
}

/* ---------- FLIP CARD ---------- */
#horoApp .flip-card{
  background:transparent;
  perspective:1000px;
  aspect-ratio: 3 / 4;
  cursor:pointer;
}
#horoApp .flip-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform 0.6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
#horoApp .flip-card.is-flipped .flip-card-inner{
  transform:rotateY(180deg);
}
#horoApp .flip-card-front,
#horoApp .flip-card-back{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  border-radius:10px;
  border:1.5px solid var(--horo-gold);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 10px;
}
#horoApp .flip-card-front{
  background:var(--horo-cream);
}
#horoApp .flip-card-back{
  background:var(--horo-green);
  transform:rotateY(180deg);
  justify-content:flex-start;
  padding-top:22px;
}

#horoApp .horo-icon{
  /*width:52%;
  max-width:70px;*/
  color:var(--horo-green);
  margin-bottom:10px;
}
#horoApp .horo-icon svg{ width:100%; height:auto; display:block; }
#horoApp .horo-icon svg path{
    fill:currentColor;
}
#horoApp .flip-card-back .horo-icon{ color:var(--horo-cream); width:34px; margin-bottom:8px;   margin-top:0px; }

#horoApp .horo-name{
  font-weight:700;
  letter-spacing:0.06em;
  font-size:13px;
  color:var(--horo-text-dark);
  text-transform:uppercase;
}
#horoApp .flip-card-back .horo-name{ color:var(--horo-cream); font-size:13px; }

#horoApp .horo-symbol{
  font-size:11px;
  color:var(--horo-gold-soft);
  margin-top:2px;
}
#horoApp .flip-card-back .horo-symbol{ color:var(--horo-gold); margin-bottom:10px; }

#horoApp .horo-desc p{
  font-size:12px; 
  line-height:1.5;
  color:#f4f4f4;
  font-family:Arial, Helvetica, sans-serif;
  padding:0 8px;
}
#horoApp .horo-desc p{ margin:0 0 8px; }
#horoApp .horo-keyword{
  font-size:11px;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--horo-cream);
  margin-top:auto;
  padding:0 8px 4px;
}
#horoApp .horo-keyword b{ color:var(--horo-gold); }

#horoApp .horo-hint{
  text-align:center;
  font-size:11px;
  font-family:Arial, Helvetica, sans-serif;
  color:#8a8a80;
  margin-top:14px;
}

/* ---------- CAROUSEL (mobile) ---------- */

#horoApp .horo-carousel-wrap{ display:none; }
@media (max-width:640px){
  #horoApp .horo-carousel-wrap{ display:block; }
}

#horoApp .horo-phone{
  margin:0 auto;
  padding:16px 12px 20px;
}

#horoApp .horo-phone .horo-header{
  text-align:center;
  padding:0 0 10px;
}
#horoApp .horo-phone .horo-header h2{ font-size:20px; }

#horoApp .horo-carousel{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:0;
  scrollbar-width:none;
}
#horoApp .horo-carousel::-webkit-scrollbar{ display:none; }

#horoApp .horo-carousel .flip-card{
  flex:0 0 100%;
  scroll-snap-align:center;
  aspect-ratio:3/4.3;
  /*max-width:220px;*/
  max-width:90%;
  margin-left:10px;
  margin-right:10px;
}

#horoApp .horo-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:12px;
}

#horoApp .horo-dot{
  width:15px;
  height:15px;
  border-radius:50%;
  background:#cfc7b0;
  margin-right: 3px;
  margin-top: 7px;
}

#horoApp .horo-dot.is-active{ background:var(--horo-green); }

#horoApp .horo-phone .horo-hint{ margin-top:8px; }

#horoApp{
    max-width:1100px;
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
}

#horoApp *{
    box-sizing:border-box;
}

/*=============================
GRID
=============================*/

#horoApp .horo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

@media(max-width:900px){

    #horoApp .horo-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:640px){
    #horoApp .horo-grid{
        display:none;
    }
}

roApp .flip-card-front,
#horoApp .flip-card-back{
    position:absolute;
    inset:0;
    border-radius:18px;
    border:2px solid var(--horo-green);
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    overflow:hidden;
    backface-visibility:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}
#horoApp .flip-card-back .horo-keyword b {
  color:#fff;
}
#horoApp .flip-card-front::before{
    content:"";
    position:absolute;
    top:20px;
    bottom:20px;
    left:20px;
    right:20px;
    border:1px solid var(--gold);
    pointer-events:none;
}

#horoApp .flip-card-front::before,
#horoApp .flip-card-back::before{
    content:"";
    position:absolute;
    inset:20px;
    border:1px solid var(--gold);
    pointer-events:none;
    z-index:1;
}

#horoApp .flip-card-front::after,
#horoApp .flip-card-back::after{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        url("/img/horoscopo/lt.svg"),
        url("/img/horoscopo/rt.svg"),
        url("/img/horoscopo/lb.svg"),
        url("/img/horoscopo/rb.svg");

    background-repeat:no-repeat;

    background-size:17px 17px;

    background-position:
        14px 14px,
        calc(100% - 14px) 14px,
        14px calc(100% - 14px),
        calc(100% - 14px) calc(100% - 14px);

    pointer-events:none;
    z-index:2;
}

#horoApp .flip-card-front::before,
#horoApp .flip-card-back::before{
    content:"";
    position:absolute;
    inset:20px;
    pointer-events:none;
    z-index:1;

    --corner-gap:17px;
    --line:1px;

    background:
        linear-gradient(var(--gold), var(--gold))
            var(--corner-gap) 0 /
            calc(100% - (var(--corner-gap) * 2)) var(--line)
            no-repeat,

        linear-gradient(var(--gold), var(--gold))
            var(--corner-gap) 100% /
            calc(100% - (var(--corner-gap) * 2)) var(--line)
            no-repeat,

        linear-gradient(var(--gold), var(--gold))
            0 var(--corner-gap) /
            var(--line) calc(100% - (var(--corner-gap) * 2))
            no-repeat,

        linear-gradient(var(--gold), var(--gold))
            100% var(--corner-gap) /
            var(--line) calc(100% - (var(--corner-gap) * 2))
            no-repeat;
            border:0
}
#horoApp .flip-card-back .horo-icon svg path  {
  fill: var(--horo-gold);
}
#horoApp .horo-desc p {
  font-size: 13px;
  padding: 0 25px;
}
#horoApp .flip-card-back{
    justify-content:center;
}
#horoApp .flip-card-back .horo-name {
  font-size:21px;
}
#horoApp .flip-card-back .horo-icon {
  margin-bottom: 3px;
  margin-top: 8px;
}
#horoApp .horo-keyword {
  font-size: 13px;
  margin-top: 17%;
}