/* Sección independiente: tatuajes semipermanentes | TatuajesTemporales.com */
.ttp-semi {
  --st-ink: #25201d;
  --st-gold: #b1843d;
  --st-gold-soft: #e0bd83;
  --st-cream: #faf5ef;
  --st-bg: #f6efe6;
  --st-border: #ead9c6;
  --st-muted: #6b5e52;
  display: block;
  overflow: hidden;
  color: var(--st-ink);
  background: var(--st-cream);
  isolation: isolate;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  line-height: 1.6;
}
.ttp-semi *, .ttp-semi *::before, .ttp-semi *::after { box-sizing: border-box; }
.ttp-semi img { display: block; width: 100%; max-width: 100%; }
.ttp-semi a { color: inherit; text-decoration: none; }
.ttp-semi a:focus-visible { outline: 3px solid #be8c38; outline-offset: 4px; }
.ttp-semi .st-serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.047em; }
.ttp-semi .st-eyebrow { display:flex; gap: 15px; align-items: center; letter-spacing: .24em; text-transform: uppercase; color: #98702f; font-size: .72rem; font-weight: 760; }
.ttp-semi .st-eyebrow::before { content: ''; height: 1px; background: #b68a49; width: 42px; }
.ttp-semi .st-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 545px;
  background: radial-gradient(ellipse at 21% 45%, #fffdf9 0%, #f5ece2 62%, #eadbca 100%);
}
.ttp-semi .st-hero-image {
  position: absolute;
  width: 56%;
  height: 100%;
  top: 0; right: 0;
  object-fit: cover;
  object-position: 48% center;
}
.ttp-semi .st-hero::after { content: ''; pointer-events: none; position:absolute; inset:0;
  background:linear-gradient(90deg,#faf5ee 0%,rgba(250,245,238,.98) 30%,rgba(250,245,238,.86) 42%,rgba(250,245,238,.35) 56%,transparent 73%); }
.ttp-semi .st-wrap { width: min(1240px,calc(100% - 72px)); margin-inline: auto; }
.ttp-semi .st-hero-content { position: relative; z-index: 1; width: min(1240px,calc(100% - 72px)); margin-inline: auto; padding: 72px 0 68px; }
.ttp-semi .st-hero-text { max-width: 645px; }
.ttp-semi .st-hero h2 { font-size: clamp(3rem,5.7vw,5.25rem); line-height: .98; margin: 21px 0 17px; }
.ttp-semi .st-subtitle { max-width: 560px; font: italic clamp(1.24rem,2.3vw,1.7rem)/1.31 Georgia,serif; margin: 0 0 20px; }
.ttp-semi .st-gold-rule { display: block; width: 86px; height: 2px; background: linear-gradient(90deg,#aa7629,#ebd6b8); margin: 20px 0 24px; }
.ttp-semi .st-intro { max-width: 540px; font-size: clamp(.92rem,1.4vw,1.06rem); line-height: 1.65; margin: 0 0 16px; }
.ttp-semi .st-intro strong { font-weight: 720; }
.ttp-semi .st-unisex { margin: 0; color: #514437; font-size: 1rem; }
.ttp-semi .st-traits { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.ttp-semi .st-trait { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 700; }
.ttp-semi .st-trait-icon { width: 35px; height: 35px; border: 1.5px solid #ad7f36; color: #a87930; border-radius: 50%; display: grid; place-items: center; font-size: 1.06rem; font-weight: 400; }
.ttp-semi .st-explain { padding: 56px 0 60px; background: #fffcf9; }
.ttp-semi .st-explain-grid { display: grid; grid-template-columns: 1.13fr 1fr; align-items: center; gap: 56px; }
.ttp-semi .st-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.ttp-semi .st-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 9px; background:#dcc3a5; aspect-ratio: .87; }
.ttp-semi .st-gallery img { height:100%; object-fit: cover; object-position: center; transition: transform .4s; }
.ttp-semi .st-gallery figure:hover img { transform: scale(1.055); }
.ttp-semi .st-explain-copy { border-left: 1px solid #bd914e; padding-left: 39px; }
.ttp-semi .st-explain h3 { font-size: clamp(2rem,3.4vw,3.15rem); line-height: 1.1; margin: 0 0 20px; }
.ttp-semi .st-explain p { color:#51483e; font-size: 1rem; line-height: 1.76; margin: 0; }
.ttp-semi .st-benefits { background:linear-gradient(105deg,#f7f0e8,#fdf8f2); padding:57px 0 61px; border-top:1px solid #f1e7d9; }
.ttp-semi .st-benefits-grid { display: grid; grid-template-columns: 1.08fr repeat(4,1fr); align-items: stretch; gap: 0; }
.ttp-semi .st-benefits-heading { padding:4px 26px 0 0; }
.ttp-semi .st-benefits-heading h3 { font-size:clamp(2.05rem,3.45vw,3.55rem);line-height:1.04;margin:0;max-width:360px; }
.ttp-semi .st-benefit { border-left: 1px solid #e1c9a6; padding: 8px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 11px; justify-content: center; }
.ttp-semi .st-benefit-icon { height: 44px; display: grid; place-items: center; color: #a77930; font: 2.1rem/1 Georgia,serif; }
.ttp-semi .st-benefit p { font-size:.85rem;line-height:1.48;margin:0;max-width:180px; }
.ttp-semi .st-benefits-foot { margin: 29px 0 0; font-size:.74rem; color:#7e6b56; }
.ttp-semi .st-footer { background: linear-gradient(105deg,#252120,#36302a 55%,#221e1c); color: #f9efe2; padding: 32px 0; }
.ttp-semi .st-footer-inner { display: flex; align-items:center; justify-content:space-between; gap:28px; }
.ttp-semi .st-duration { display:flex;align-items:center;gap:21px; }
.ttp-semi .st-calendar { width: 68px; height: 69px; border:2px solid #d2a658; color:#edc47b; border-radius:10px; display:grid; place-items:center; font: 400 2rem Georgia,serif; flex:none; }
.ttp-semi .st-duration p { margin: 0; font:italic clamp(1.6rem,3.2vw,2.85rem)/1.1 Georgia,serif; letter-spacing:-.04em; }
.ttp-semi .st-duration em { color: #ebc079; font-style: italic; }
.ttp-semi .st-btn { display: inline-flex; min-height: 49px; align-items:center;justify-content:center; gap:16px; padding:13px 23px; border-radius:6px; background:#c09657;color:#1d1710!important; font-size:.84rem; font-weight:800; line-height:1.3; text-align:center; transition:background .2s,transform .2s; white-space:nowrap; }
.ttp-semi .st-btn:hover { background:#ecc58b; transform:translateY(-2px); }
.ttp-semi .st-duration-note { margin: 10px auto 0; width:min(1240px,calc(100% - 72px)); color:#cab8a4; font-size:.68rem; line-height: 1.5; }
@media(max-width:1060px) {
  .ttp-semi .st-benefits-grid { grid-template-columns:repeat(4,1fr); row-gap:25px; }
  .ttp-semi .st-benefits-heading { grid-column:1/-1;padding:0 0 13px; }
  .ttp-semi .st-benefits-heading h3 { max-width:none; }
  .ttp-semi .st-benefit:first-of-type { border:0; }
  .ttp-semi .st-hero-text { max-width:570px; }
  .ttp-semi .st-explain-grid { gap:32px; }
}
@media(max-width:760px) {
  .ttp-semi .st-wrap,.ttp-semi .st-hero-content {width:calc(100% - 40px);}
  .ttp-semi .st-hero { min-height:810px;display:flex;align-items:flex-end; }
  .ttp-semi .st-hero-image { width:100%;height:56%;top:0;object-position:60% 35%; }
  .ttp-semi .st-hero::after {background:linear-gradient(0deg,#faf5ef 0%,#faf5ef 29%,rgba(250,245,239,.95) 40%,rgba(250,245,239,.45) 58%,transparent 87%);}
  .ttp-semi .st-hero-content {padding:320px 0 40px;}
  .ttp-semi .st-hero h2 { font-size:clamp(2.85rem,10vw,4.65rem);margin:12px 0 15px; }
  .ttp-semi .st-hero-text{max-width:560px;}
  .ttp-semi .st-subtitle{font-size:1.3rem;}
  .ttp-semi .st-intro{font-size:.94rem;}
  .ttp-semi .st-traits{gap:12px;margin-top:22px;}
  .ttp-semi .st-trait{font-size:.74rem;gap:6px;}
  .ttp-semi .st-trait-icon{width:30px;height:30px;}
  .ttp-semi .st-explain { padding:40px 0; }
  .ttp-semi .st-explain-grid { grid-template-columns:1fr; gap:27px; }
  .ttp-semi .st-gallery{gap:8px;}
  .ttp-semi .st-gallery figure{aspect-ratio: .88;}
  .ttp-semi .st-explain-copy{padding-left:20px;}
  .ttp-semi .st-explain h3{font-size:2.25rem;margin-bottom:13px;}
  .ttp-semi .st-explain p{font-size:.91rem;}
  .ttp-semi .st-benefits{padding:39px 0 42px;}
  .ttp-semi .st-benefits-grid{grid-template-columns:repeat(2,1fr);gap:0;}
  .ttp-semi .st-benefits-heading{grid-column:1/-1;padding:0 0 22px;}
  .ttp-semi .st-benefits-heading h3{font-size:2.55rem;}
  .ttp-semi .st-benefit{border-left:none;border-top:1px solid #e1c9a6;padding:23px 12px;}
  .ttp-semi .st-benefit:nth-of-type(odd){border-right:1px solid #e1c9a6;}
  .ttp-semi .st-benefit p{font-size:.82rem;}
  .ttp-semi .st-footer-inner{flex-wrap:wrap;align-items:stretch;}
  .ttp-semi .st-duration{gap:17px;}
  .ttp-semi .st-duration p{font-size:2rem;}
  .ttp-semi .st-btn{width:100%;}
  .ttp-semi .st-duration-note{width:calc(100% - 40px);}
}
@media(max-width:400px){
  .ttp-semi .st-hero{min-height:850px;}
  .ttp-semi .st-hero-content{padding-top:320px;}
  .ttp-semi .st-hero h2{font-size:2.72rem;}
  .ttp-semi .st-traits{column-gap:11px;}
  .ttp-semi .st-duration p{font-size:1.65rem;}
}
@media(prefers-reduced-motion:reduce){.ttp-semi *{transition:none!important}}