/* Tatuajes V2.4.1 — Art direction refinement / local candidate.
   Applies exclusively to Tatuajes. V2 original and other sectors remain untouched. */

/* An atmospheric studio backdrop and a separately positioned full portrait. */
#sectorTop[data-sector="tatuajes"]{isolation:isolate;background:#050718;min-height:830px}
#sectorTop[data-sector="tatuajes"]::before{
 background:linear-gradient(90deg,#040616ea 0%,#040616c1 35%,#06061da6 68%,#040617ec 100%),url('assets/tattoo-studio-cinematic.jpg') center 46%/cover no-repeat!important;
 opacity:1!important;filter:saturate(1.24)!important;z-index:-1!important}
#sectorTop .tat-hero-person-stage{display:none}
#sectorTop[data-sector="tatuajes"] .tat-hero-person-stage{
 display:block;position:absolute;pointer-events:none;top:60px;bottom:45px;left:39%;width:min(29vw,460px);
 z-index:1;opacity:.90;overflow:visible;isolation:isolate;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 85%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 13%,#000 85%,transparent)}
#sectorTop[data-sector="tatuajes"] .tat-hero-person-stage img{
 width:100%;height:100%;object-fit:contain;object-position:center;
 filter:brightness(.76) saturate(1.4) contrast(1.17) drop-shadow(0 0 28px #1942f0a0)}
#sectorTop[data-sector="tatuajes"] .sector-grid{z-index:2;position:relative;grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr);min-height:750px;gap:24px;padding-top:44px;padding-bottom:22px}
#sectorTop[data-sector="tatuajes"] .sector-title{position:relative;z-index:3}
#sectorTop[data-sector="tatuajes"] .sector-title h1{font-size:clamp(45px,5.15vw,77px);line-height:1.015;max-width:630px}
#sectorTop[data-sector="tatuajes"] .sector-title p{max-width:565px}
#sectorTop[data-sector="tatuajes"] .phone{
 position:relative;z-index:4;width:min(100%,406px);max-width:406px;height:680px;min-height:0!important;
 margin-right:0;margin-left:auto;align-self:center;display:flex;flex-direction:column;overflow:hidden;
 border-radius:43px;box-shadow:0 0 0 1.5px #df26ef,0 0 27px #20ebffb0,0 0 65px #9d21ff88,12px 30px 43px #000c}
#sectorTop[data-sector="tatuajes"] .phone .phonehead{padding:11px 15px;flex-shrink:0}
#sectorTop[data-sector="tatuajes"] .tat-hero-mock{
 flex:1;min-height:0!important;height:auto!important;display:flex;flex-direction:column;gap:7px;
 padding:9px 12px 12px;background:radial-gradient(ellipse at 45% 8%,#152b59,#031123 72%);
 overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1d679d transparent}
#sectorTop[data-sector="tatuajes"] .tat-hero-day{font-size:9px;padding:5px 8px}
#sectorTop[data-sector="tatuajes"] .tat-hero-msg{font-size:10.7px;max-width:93%;line-height:1.35;padding:8px 10px}
#sectorTop[data-sector="tatuajes"] .tat-hero-msg small{margin-top:3px;font-size:8.5px}
#sectorTop[data-sector="tatuajes"] .tat-hero-appointments{display:block;white-space:pre-line;border-top:1px solid #476b9c;margin-top:5px;padding-top:6px;font-size:9.8px;line-height:1.45;color:#e3f4ff}
#sectorTop[data-sector="tatuajes"] .tat-hero-input{position:sticky;bottom:-12px;background:#061830;margin-top:auto;padding:5px 0}
#sectorTop[data-sector="tatuajes"] .tat-hero-channels{position:relative;z-index:5}
#sectorTop[data-sector="tatuajes"] .tat-hero-channels b img{display:block;width:24px;height:24px;filter:invert(1)}
#sectorTop[data-sector="tatuajes"] .tat-brand-instagram{background:linear-gradient(135deg,#fbab2e,#d428a2,#6c28d9)!important}
#sectorTop[data-sector="tatuajes"] .tat-brand-tiktok{background:#030916!important;box-shadow:inset 0 0 0 1px #21ecf8,0 0 16px #e51a8a!important}
#sectorTop[data-sector="tatuajes"] .tat-brand-whatsapp{background:#096c50!important}
#sectorTop[data-sector="tatuajes"] .tat-brand-messenger{background:linear-gradient(135deg,#178cff,#954aff)!important}
#sectorTop[data-sector="tatuajes"] .tat-brand-gmail{background:#fff!important}
#sectorTop[data-sector="tatuajes"] .tat-brand-gmail img{filter:none!important}
#tattooExperience .tat-brand-icon{width:17px;height:17px;filter:invert(1);object-fit:contain;vertical-align:middle}
#tattooExperience .tat-socialline button,.tat-metric-brand{display:inline-flex;align-items:center;gap:8px}
#tattooExperience .tat-core-channel-pins span img{width:23px;height:23px;filter:invert(1);object-fit:contain}
#tattooExperience .tat-core-channel-pins span[title="Instagram"]{background:linear-gradient(140deg,#ffaa32,#df268d,#7624da)}
#tattooExperience .tat-core-channel-pins span[title="TikTok"]{background:#070e17}
#tattooExperience .tat-core-channel-pins span[title="WhatsApp"]{background:#03684e}
#tattooExperience .tat-core-channel-pins span[title="Messenger"]{background:linear-gradient(140deg,#0084ff,#a642fc)}
#tattooExperience .tat-tiktok,#tattooExperience .tat-instagram,#tattooExperience .tat-metric-brand{display:inline-flex;align-items:center;gap:7px}
#tattooExperience .tat-growth .tat-growth-metrics>div span.tat-metric-brand{display:flex}
/* A consistent 0.57 to 0.59 aspect ratio instead of elongated phones. */
#tattooExperience .tat-large{width:min(100%,401px);max-width:401px;height:685px;min-height:0;max-height:none;transform:none!important}
#tattooExperience .tat-small,#tattooExperience .tat-journey .tat-small{width:min(100%,355px);max-width:355px;height:615px;min-height:0;max-height:none;transform:none!important}
#tattooExperience .tat-owner-phone{width:min(100%,365px);max-width:365px;height:634px;min-height:0;max-height:none;transform:none!important}
#tattooExperience .tat-growth-phone{width:min(100%,380px);max-width:380px;height:659px;min-height:0;max-height:none;transform:none!important}
#tattooExperience .tat-phonebody{flex:1;min-height:0;overflow-y:auto}
#tattooExperience .tat-journey{padding:19px 12px}
#tattooExperience .tat-twin{gap:18px;max-width:1110px}
#tattooExperience .tat-owner .tat-owner-layout{gap:26px}
#tattooExperience .tat-growth-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.86fr) minmax(260px,.78fr);gap:23px}
/* Organic, atmospheric Core with diffusion and irregular slow motion. */
#tattooExperience .tat-ray-ring{
 position:relative;border:0!important;
 background:radial-gradient(ellipse at 19% 25%,#05d8ffad,transparent 42%),
 radial-gradient(ellipse at 82% 77%,#f125dbdc,transparent 50%),
 conic-gradient(from 60deg,#117aff,#f128d7,#5216ff,#05e6f7,#6018e7,#117aff)!important;
 box-shadow:0 0 38px #00bfffe0,0 0 95px #b334ffc4,0 0 155px #0979ff65!important;
 animation:tat-vital-glow 8s ease-in-out infinite alternate!important}
#tattooExperience .tat-ray-ring:before{
 inset:24px!important;border:2px solid #81dfffe0!important;
 background:radial-gradient(ellipse at 30% 20%,#215de3,#090c3e 60%,#290c54 100%)!important;
 box-shadow:0 0 36px #40eaff,inset 0 0 73px #b519efaa!important}
#tattooExperience .tat-ray-ring:after{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:47% 55% 43% 54%;
 background:conic-gradient(from 15deg,#03dcff84,#a228ffab,#f31bc072,#114effa0,#03dcff6a);
 filter:blur(25px);opacity:.82;animation:tat-vital-cloud 6s ease-in-out infinite alternate}
#tattooExperience .tat-ray-orbit{opacity:.24;border-color:#44cbff6e!important;box-shadow:none!important}
#tattooExperience .tat-ray-orbit:before,#tattooExperience .tat-ray-orbit:after{opacity:.14}
#tattooExperience .tat-core-inner{animation:none!important}
#tattooExperience .tat-core-inner>span{text-shadow:0 0 32px #32eaff,0 0 54px #b63aff!important}
@keyframes tat-vital-glow{0%{transform:scale(.965) rotate(-4deg);filter:hue-rotate(0deg)}50%{transform:scale(1.035) rotate(2deg);filter:hue-rotate(9deg)}100%{transform:scale(.99) rotate(6deg);filter:hue-rotate(-13deg)}}
@keyframes tat-vital-cloud{0%{transform:scale(.94) rotate(-10deg);opacity:.62}100%{transform:scale(1.13) rotate(14deg);opacity:.93}}
@media(max-width:1080px){
 #sectorTop[data-sector="tatuajes"] .sector-grid{grid-template-columns:1fr;gap:24px;min-height:0}
 #sectorTop[data-sector="tatuajes"] .tat-hero-person-stage{top:150px;bottom:auto;left:auto;right:3%;width:min(40vw,420px);height:570px;opacity:.5}
 #sectorTop[data-sector="tatuajes"] .phone{margin-inline:auto}
 #tattooExperience .tat-growth-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:740px){
 #sectorTop[data-sector="tatuajes"]{min-height:0}
 #sectorTop[data-sector="tatuajes"] .sector-grid{grid-template-columns:1fr;padding:33px 0 42px}
 #sectorTop[data-sector="tatuajes"] .tat-hero-person-stage{top:200px;right:0;bottom:auto;width:70%;height:430px;opacity:.25}
 #sectorTop[data-sector="tatuajes"] .phone{width:min(100%,355px);height:615px;min-height:0!important}
 #sectorTop[data-sector="tatuajes"] .tat-hero-mock{gap:6px}
 #sectorTop[data-sector="tatuajes"] .tat-hero-msg{font-size:10.2px}
 #tattooExperience .tat-large{width:min(100%,352px);height:608px}
 #tattooExperience .tat-small,#tattooExperience .tat-journey .tat-small{width:min(100%,340px);height:590px}
 #tattooExperience .tat-owner-phone{width:min(100%,345px);height:600px}
 #tattooExperience .tat-growth-phone{width:min(100%,348px);height:604px}
 #tattooExperience .tat-growth-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){#tattooExperience .tat-ray-ring,#tattooExperience .tat-ray-ring:after{animation:none!important}}

/* Label reflects approved owner conversation rather than customer intake. */
#sectorTop[data-sector="tatuajes"] .phonehead div>div::after{content:"WhatsApp · Propietario"!important}