/* ==========================================================
   Jerotattoo77 — páginas interiores
   Restilo de los bloques originales (mismo HTML, mismo texto).
   Requiere jero.css + bootstrap-grid (solo maquetación).
   ========================================================== */
body.inner{background:var(--bg)}
body.inner main{display:block}

/* contenedor y rejilla */
.inner .container{width:100%;max-width:1264px;padding-left:32px;padding-right:32px;margin-inline:auto}
.inner section{position:relative}
.inner .row{--bs-gutter-x:2rem}
.inner [class*="cid-"]{background:transparent}

/* ---------- tipografía común ---------- */
.inner .mbr-section-title,.inner .article2 h1,.inner .article4 h1{
  font:800 clamp(2.3rem,5.4vw,4.6rem)/1 var(--head);font-stretch:75%;text-transform:uppercase;letter-spacing:.008em;color:var(--ink);margin:0 0 .5em}
.inner .mbr-section-title strong{font-weight:800}
.inner .mbr-text,.inner .mbr-section-subtitle,.inner .text-wrapper p{font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.75;color:var(--ink-2);margin:0 0 1.3em;max-width:46em}
.inner .mbr-section-subtitle{font-weight:500}
.inner .align-center{text-align:center}
.inner .align-center.mbr-section-title,.inner .content-head h3{margin-inline:auto}
.inner .content-head br{display:none}
.inner em{font-style:italic}
.inner a{text-underline-offset:3px}
.inner .mbr-text a,.inner p a,.inner li a{font-weight:700}

/* ---------- botones heredados ---------- */
.inner .mbr-section-btn{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.inner .btn,.inner a.cta-button{display:inline-flex;align-items:center;justify-content:center;font:700 .98rem/1 var(--font);padding:1.1em 1.7em;border-radius:999px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;transition:background .18s,color .18s,transform .18s;margin:0}
.inner .btn:hover,.inner a.cta-button:hover{transform:translate(-2px,-2px)}
.inner .btn-info-outline{background:transparent;color:var(--ink)}
.inner .btn-info-outline:hover{background:var(--ink);color:#fff}
.inner .btn-primary,.inner a.cta-button{background:var(--ink);color:#fff}
.inner .btn-primary:hover,.inner a.cta-button:hover{background:#2a2a2d;border-color:#2a2a2d;color:#fff}
.inner a.cta-button{margin:.2em .4em .2em 0}
/* botones dentro de un párrafo: compactos, sin romper el interlineado */
.inner p a.cta-button,.inner li a.cta-button,.inner .mbr-text a.cta-button{display:inline-block;font-size:.82em;line-height:1.2;padding:.35em 1em;margin:0 .15em;vertical-align:baseline;white-space:nowrap;transform:none}
.inner p a.cta-button:hover{transform:none}

/* ---------- Sobre mí / Gracias (article2, article4) ---------- */
.article2,.article4{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px)}
.article2 .row.justify-content-center,.article4 .row.justify-content-center{align-items:center}
.article2 .image-wrapper,.article4 .image-wrapper{padding-bottom:1.5rem}
.article2 .image-wrapper img{background:#fff;padding:9px;box-shadow:0 22px 44px -14px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.2);transform:rotate(-3deg);transition:transform .4s cubic-bezier(.2,.8,.2,1);width:100%;height:auto}
.article2 .image-wrapper img:hover{transform:rotate(0) scale(1.02)}
.article4 .image-wrapper img{mix-blend-mode:multiply;max-width:340px;margin-inline:auto;width:100%;height:auto}
.article2 .text-wrapper h1{font-size:clamp(2rem,4.3vw,3.7rem)}
.article2 .mbr-text{max-width:42em}
.article2 .mbr-text strong{color:var(--ink)}
.article2 .row.mt-5{margin-top:clamp(40px,6vw,80px)!important}
.article2 .row.mt-5>.col-12{width:100%;max-width:1040px;margin-inline:auto}
.article2 .row.mt-5 h2,.contacts03 .row.mt-5 h2{font:800 clamp(2rem,4vw,3.2rem)/1 var(--head);font-stretch:75%;text-transform:uppercase;margin:0 0 .6em}
.inner .row.mt-5 div:has(>h3){counter-increment:q;display:grid;grid-template-columns:78px 1fr;column-gap:22px;border-top:2px solid var(--ink);padding:24px 0}
.inner .row.mt-5 div:has(>h3)::before{content:counter(q,decimal-leading-zero);grid-row:1 / span 2;font:800 2.6rem/1 var(--head);font-stretch:75%;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.inner .row.mt-5>.col-12{counter-reset:q}
.inner .row.mt-5 div:has(>h3):last-child{border-bottom:2px solid var(--ink)}
.inner .row.mt-5 h3{font:800 1.45rem/1.1 var(--head);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em;margin:0 0 .4em}
.inner .row.mt-5 h3 strong{font-weight:800}
.inner .row.mt-5 div:has(>h3) p{margin:0;font-size:1.05rem;line-height:1.65;color:var(--ink-2);max-width:none}

/* ---------- Ubicación (contacts03) ---------- */
.contacts03{padding:clamp(48px,7vw,96px) 0}
.contacts03 .row.justify-content-center{align-items:center}
.contacts03 h1{font-size:clamp(2.2rem,3.8vw,3.6rem)}
.inner .tick-wrap{margin-top:0}
.contacts03 .google-map{background:#fff;padding:8px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--bg-2),10px 10px 0 2px var(--ink)}
.contacts03 .google-map iframe{display:block;filter:grayscale(1) contrast(1.08);transition:filter .3s}
.contacts03 .google-map:hover iframe{filter:grayscale(.2)}
.contacts03 .side-features{padding-top:1rem}

/* ---------- Aftercare / formulario de reservas (features026) ---------- */
.features026{padding:clamp(40px,6vw,84px) 0 clamp(60px,8vw,110px)}
.features026 .content-head h3{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:.2em;text-align:center}
.features026 .item{margin-bottom:28px;counter-increment:af}
.features026 .row{counter-reset:af}
.features026 .item-wrapper{height:100%;background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(26px,4vw,44px);position:relative;box-shadow:10px 10px 0 var(--bg-2),10px 10px 0 2px var(--ink)}
.features026 .item-wrapper::before{content:counter(af,decimal-leading-zero);position:absolute;right:26px;top:18px;font:800 3.6rem/1 var(--head);font-stretch:75%;color:transparent;-webkit-text-stroke:1.5px #4a4a50}
.features026 .card-title{font:800 clamp(1.9rem,3vw,2.5rem)/1 var(--head);font-stretch:75%;text-transform:uppercase;margin:0 0 .5em;color:#fff;max-width:80%}
.features026 .price,.features026 .card-text{color:#c9c9ce;font-size:1.08rem;line-height:1.6;margin:0 0 1.4em;max-width:none}
.features026 .card-box{display:flex;flex-direction:column;height:100%}
.features026 .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.features026 .btn-primary:hover{background:var(--bg-2);border-color:var(--bg-2)}
.features026 .iframe-container{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);box-shadow:10px 10px 0 var(--bg-2),10px 10px 0 2px var(--ink);padding:14px;display:block;max-width:900px;margin-inline:auto}

/* ---------- Formulario Spotgrab ---------- */
.form-section{padding:clamp(40px,6vw,84px) 0}
.form-section .iframe-container{background:#fff;border:2px solid var(--ink)!important;border-radius:var(--radius);padding:12px;max-width:900px;display:block;margin-inline:auto;box-shadow:10px 10px 0 var(--bg-2),10px 10px 0 2px var(--ink)}
.form-section .content-head h3{display:none}

/* ---------- Páginas de aterrizaje (gallery09 + video04) ---------- */
.gallery09{padding:clamp(44px,6vw,90px) 0 clamp(30px,4vw,56px)}
.gallery09 .row.justify-content-center{align-items:flex-start}
.gallery09 .main-text .mbr-section-title{font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1;margin-bottom:.55em;overflow-wrap:break-word;hyphens:auto}
.gallery09 .main-text .mbr-section-subtitle{font-size:1.06rem;line-height:1.65;font-weight:500;margin-bottom:0}
.gallery09 .main-text .mbr-section-subtitle strong{color:var(--ink)}
.gallery09 .side-features{margin-top:0;padding-top:.5rem}
.gallery09 .features-image{margin-bottom:26px}
.gallery09 .item-img{background:#fff;padding:8px;box-shadow:0 20px 40px -14px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.2);transform:rotate(-2.2deg);transition:transform .4s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.gallery09 .features-image:nth-child(even) .item-img{transform:rotate(2.4deg);margin-top:34px}
.gallery09 .features-image:nth-child(3n) .item-img{transform:rotate(-1deg)}
.gallery09 .item-img:hover{transform:rotate(0) scale(1.03);z-index:5;position:relative}
.gallery09 .item-img img{width:100%;height:auto;display:block}

.video04{padding:clamp(50px,7vw,96px) 0 clamp(60px,8vw,110px);background:var(--surface);border-block:2px solid var(--ink)}
.video04 .mbr-section-head{text-align:center;max-width:60rem;margin:0 auto clamp(28px,4vw,48px)}
.video04 .mbr-section-head .mbr-section-title{font-size:clamp(2.4rem,6vw,5.2rem);margin-bottom:.35em}
.video04 .mbr-section-head .mbr-section-title br{display:none}
.video04 .mbr-section-head .mbr-section-subtitle{max-width:40em;margin-inline:auto;color:var(--muted);font-size:1.15rem}
.video04 .video-wrapper{background:#000;padding:8px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--bg-2),10px 10px 0 2px var(--ink);max-width:960px;margin:0 auto 12px}
.video04 .video-wrapper video{display:block;width:100%;height:auto}
/* texto SEO: tipografía editorial */
.video04 .container.mt-5,.video04 .row.justify-content-center .col-md-10{max-width:860px;margin-inline:auto}
.video04 .container.mt-5{margin-top:clamp(40px,6vw,76px)!important}
.video04 h1{font:800 clamp(2rem,4.2vw,3.4rem)/1.02 var(--head);font-stretch:75%;text-transform:uppercase;margin:0 0 .5em;letter-spacing:.008em}
.video04 h2{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.06 var(--head);font-stretch:75%;text-transform:uppercase;margin:1.7em 0 .5em;padding-top:.7em;border-top:2px solid var(--ink);letter-spacing:.015em}
.video04 .container p,.video04 .col-md-10 p{font-size:1.1rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.15em;max-width:none}
.video04 ul{list-style:none;padding:0;margin:0 0 1.5em;display:grid;gap:10px}
.video04 li{position:relative;padding:14px 18px 14px 52px;background:#fff;border:2px solid var(--ink);font-size:1.05rem;line-height:1.5;color:var(--ink-2)}
.video04 li::before{content:"✦";position:absolute;left:18px;top:13px;font-size:1.1rem;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .inner .container{padding-left:20px;padding-right:20px}
  .article2 .image-wrapper img{max-width:420px;margin-inline:auto}
  .gallery09 .main-text{margin-bottom:34px}
  .gallery09 .features-image:nth-child(even) .item-img{margin-top:0}
  .contacts03 .col-lg-4{margin-bottom:34px}
}
@media (max-width:575px){
  .inner .row.mt-5 div:has(>h3){grid-template-columns:48px 1fr;column-gap:14px}
  .inner .row.mt-5 div:has(>h3)::before{font-size:1.8rem}
  .inner .row.mt-5 h3{font-size:1.2rem}
  .features026 .item-wrapper::before{font-size:2.6rem;right:18px}
  .inner .mbr-section-btn .btn{width:100%}
  .contacts03 .google-map iframe{height:320px!important}
}