/* ===========================================================
   ECOINNOVA INTERIORISMO — v4 INNER PAGES
   Page-specific layout classes (Áreas, Contacto, Blog post).
   Loaded after styles.css; reuses its tokens and base classes.
   =========================================================== */

/* ====================================================== PAGE HERO (inner) */
.page-hero{ position:relative; color:#fff; overflow:hidden; display:flex; min-height:clamp(400px,52vh,560px); }
.page-hero .bg{ position:absolute; inset:0; z-index:0; } .page-hero .bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(18,18,18,.9) 0%, rgba(18,18,18,.6) 55%, rgba(18,18,18,.35) 100%); }
.page-hero .ph-in{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; align-self:flex-end; padding:clamp(112px,12vw,140px) var(--pad) clamp(40px,4.5vw,60px); }
@media (max-width:560px){ .page-hero{ min-height:clamp(340px,64vh,460px); } .page-hero .ph-in{ padding-top:104px; } }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--yellow); }
.breadcrumb .sep{ width:12px; height:12px; color:var(--yellow); }
.breadcrumb .cur{ color:#fff; }
.page-hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(44px,6vw,84px); line-height:1.02; max-width:16ch; }
.page-hero h1 .accent{ color:var(--yellow); font-style:italic; }
.page-hero p{ max-width:52ch; color:rgba(255,255,255,.82); margin-top:22px; font-size:15.5px; }

/* ====================================================== AREAS GRID */
.area-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.area{ position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; display:block; }
.area img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.area:hover img{ transform:scale(1.05); }
.area .scrim{ position:absolute; inset:0; background:linear-gradient(transparent 38%, rgba(18,18,18,.85)); }
.area .body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; color:#fff; }
.area .k{ font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); }
.area h3{ font-size:clamp(22px,1.9vw,28px); margin:8px 0 0; }
.area .meta{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); font-size:13px; color:var(--d-soft); }
.area .meta .go{ display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; transition:gap .3s var(--ease); }
.area .meta .go svg{ width:13px; height:13px; }
.area:hover .meta .go{ gap:12px; color:var(--yellow); }
@media (max-width:860px){ .area-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .area-grid{ grid-template-columns:1fr; } .area{ aspect-ratio:16/11; } }

/* coverage split */
.cover{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.cover-media{ position:relative; aspect-ratio:1/1; border:1px solid var(--line); }
.cover-media .pin{ position:absolute; width:14px; height:14px; background:var(--yellow); border:2px solid var(--ink); transform:translate(-50%,-50%); }
.cover-media .pin::after{ content:""; position:absolute; inset:-7px; border:1px solid var(--yellow); animation:pinpulse 2.4s var(--ease) infinite; }
@keyframes pinpulse{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.8); opacity:0; } }
.cover-list{ list-style:none; columns:2; column-gap:24px; margin-top:24px; }
.cover-list li{ display:flex; align-items:center; gap:10px; padding:11px 0; font-size:14.5px; font-weight:500; break-inside:avoid; border-bottom:1px solid var(--line-soft); }
.cover-list li svg{ width:16px; height:16px; color:var(--yellow-d); flex:none; }
@media (max-width:860px){ .cover{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:480px){ .cover-list{ columns:1; } }

/* ====================================================== CONTACT PAGE */
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.cform{ background:var(--paper); }
.cform .fld{ margin-bottom:22px; }
.cform label{ display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.cform input, .cform select, .cform textarea{ width:100%; font-family:var(--body); font-size:15px; color:var(--fg); background:var(--paper); border:1px solid var(--line); border-radius:0; padding:14px 16px; outline:none; transition:border-color .25s; }
.cform input:focus, .cform select:focus, .cform textarea:focus{ border-color:var(--yellow-d); }
.cform textarea{ resize:vertical; min-height:130px; }
.cform .two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cform .btn{ width:100%; justify-content:center; }
.cform .check{ display:flex; align-items:center; gap:11px; margin-bottom:22px; font-size:13px; color:var(--muted); }
.cform .check input{ width:16px; height:16px; accent-color:var(--yellow-d); }
.cform .cform-ok{ background:var(--ink); color:#fff; padding:14px 18px; margin-bottom:18px; font-size:14px; }
.contact-aside .info-card{ background:var(--ink); color:#fff; padding:clamp(22px,2vw,30px); }
.contact-aside .info-card .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-bottom:10px; }
.contact-aside .info-card p{ font-size:14.5px; color:var(--d-soft); line-height:1.7; }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.cc{ background:var(--paper); padding:clamp(22px,2vw,30px); }
.cc .ic{ width:46px; height:46px; background:var(--yellow); color:#121212; display:grid; place-items:center; margin-bottom:18px; }
.cc .ic svg{ width:22px; height:22px; }
.cc .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-d); margin-bottom:8px; }
.cc p{ font-size:14.5px; color:var(--fg-soft); line-height:1.7; }
.cc a:hover{ color:var(--yellow-d); }
@media (max-width:860px){ .contact-split{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:480px){ .cform .two{ grid-template-columns:1fr; } .contact-cards{ grid-template-columns:1fr; } }

/* full-bleed map band — spans the full viewport width and a tall height */
.map-full{ position:relative; width:100%; height:clamp(440px,72vh,760px); overflow:hidden; border-block:1px solid var(--line); }
.map-full iframe{ width:100%; height:100%; border:0; display:block; }
.map-full .map-card{ position:absolute; left:clamp(16px,5vw,72px); top:50%; transform:translateY(-50%); z-index:2; background:var(--ink); color:#fff; padding:28px 32px; max-width:340px; box-shadow:0 24px 60px rgba(0,0,0,.32); }
.map-full .map-card .k{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:12px; }
.map-full .map-card h3{ font-size:24px; margin-bottom:10px; }
.map-full .map-card p{ font-size:14px; color:var(--d-soft); line-height:1.7; }
@media (max-width:600px){ .map-full{ height:80vh; } .map-full .map-card{ left:16px; right:16px; max-width:none; } }

/* ====================================================== ADD-ONS / DEPARTMENTS */
.addons{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.addon{ background:var(--paper); padding:clamp(26px,2.4vw,38px) clamp(22px,2vw,30px); display:flex; flex-direction:column; transition:background .3s; }
.addon:hover{ background:var(--paper-2); }
.addon .ic{ width:48px; height:48px; border:1px solid var(--line); display:grid; place-items:center; color:var(--yellow-d); margin-bottom:20px; transition:all .3s var(--ease); }
.addon:hover .ic{ background:var(--yellow); border-color:var(--yellow); color:#121212; }
.addon .ic svg{ width:23px; height:23px; }
.addon h3{ font-size:21px; margin-bottom:9px; }
.addon p{ font-size:13.5px; color:var(--fg-soft); margin-bottom:18px; flex:1; }
.addon .from{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.addon .from b{ font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:0; text-transform:none; color:var(--fg); }
@media (max-width:860px){ .addons{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .addons{ grid-template-columns:1fr; } }

/* ====================================================== ARTICLE / PROSE */
.article-hero{ max-width:880px; margin:0 auto; text-align:center; }
.article-hero .tags{ display:flex; gap:8px; justify-content:center; margin-bottom:24px; }
.article-hero .tags span{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; }
.article-hero .tags .t1{ background:var(--ink); color:#fff; }
.article-hero .tags .t2{ background:var(--yellow); color:#121212; }
.article-hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,4.6vw,64px); line-height:1.05; }
.post-meta{ display:flex; align-items:center; gap:16px; font-size:12.5px; color:var(--muted); margin-bottom:20px; }
.post-meta .dot{ width:4px; height:4px; background:var(--yellow-d); }
.article-hero .post-meta{ justify-content:center; margin-top:26px; margin-bottom:0; }
.article-cover{ aspect-ratio:16/8; border:1px solid var(--line); overflow:hidden; margin-bottom:clamp(40px,5vw,72px); }
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.article-wrap{ display:grid; grid-template-columns:1fr minmax(0,720px) 1fr; }
.article-wrap > *{ grid-column:2; }
.prose{ font-size:17px; line-height:1.8; color:var(--fg-soft); }
.prose h2{ font-family:var(--serif); font-size:clamp(26px,2.4vw,36px); color:var(--fg); margin:44px 0 18px; }
.prose h3{ font-family:var(--serif); font-size:22px; color:var(--fg); margin:32px 0 14px; }
.prose p{ margin-bottom:22px; }
.prose strong{ color:var(--fg); }
.prose a{ color:var(--yellow-d); border-bottom:1px solid var(--yellow-d); }
.prose ul{ list-style:none; margin:0 0 22px; display:flex; flex-direction:column; gap:12px; padding:0; }
.prose ul li{ display:flex; gap:12px; align-items:flex-start; }
.prose ul li::before{ content:""; width:7px; height:7px; background:var(--yellow); flex:none; margin-top:9px; }
.prose blockquote{ margin:32px 0; padding:8px 0 8px 28px; border-left:2px solid var(--yellow); font-family:var(--serif); font-style:italic; font-size:clamp(22px,2vw,28px); line-height:1.4; color:var(--fg); }
.prose img, .prose .fig{ width:100%; border:1px solid var(--line); margin:14px 0 8px; }
.prose .figcap{ font-size:12.5px; color:var(--muted); margin-bottom:28px; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }

.share{ display:flex; align-items:center; gap:14px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.share .lbl{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.share a{ width:42px; height:42px; border:1px solid var(--line); display:grid; place-items:center; color:var(--fg); transition:all .25s; }
.share a:hover{ background:var(--yellow); border-color:var(--yellow); color:#121212; }
.share a svg{ width:16px; height:16px; }

.author{ display:flex; gap:18px; align-items:center; margin-top:30px; padding:clamp(24px,2.2vw,32px); border:1px solid var(--line); background:var(--paper-2); }
.author img{ width:68px; height:68px; object-fit:cover; flex:none; background:#ddd; }
.author .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-d); }
.author h4{ font-size:20px; margin:6px 0 6px; }
.author p{ font-size:13.5px; color:var(--fg-soft); max-width:52ch; }

.blog3 .post .body .tlink{ margin-top:2px; }
.blog3 .post .tags{ display:flex; gap:8px; margin-bottom:16px; }
.blog3 .post .body .post-meta{ margin-top:16px; }

/* ====================================================== BLOG INDEX (featured + filters) */
.feat-post{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,4vw,56px); align-items:center; border:1px solid var(--line); }
.feat-post .pic{ aspect-ratio:4/3; overflow:hidden; }
.feat-post .pic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.feat-post:hover .pic img{ transform:scale(1.04); }
.feat-post .body{ padding:clamp(28px,3vw,52px) clamp(28px,3vw,52px) clamp(28px,3vw,52px) 0; }
.feat-post .tags{ display:flex; gap:8px; margin-bottom:18px; }
.feat-post h2{ font-family:var(--serif); font-size:clamp(28px,3vw,44px); margin-bottom:16px; }
.feat-post p{ color:var(--fg-soft); font-size:15px; margin-bottom:22px; max-width:48ch; }
@media (max-width:820px){ .feat-post{ grid-template-columns:1fr; } .feat-post .body{ padding:clamp(24px,3vw,36px); padding-top:0; } }

.filterbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(30px,3.5vw,48px); }
.chip{ font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:11px 20px; border:1px solid var(--line); color:var(--fg-soft); background:none; transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.chip:hover{ border-color:var(--fg); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* shared tag pills (featured post + article header) */
.tags span{ font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; }
.tags .t1{ background:var(--ink); color:#fff; }
.tags .t2{ background:var(--yellow); color:#121212; }

/* ====================================================== ABOUT / NOSOTROS PAGE */
/* Team feature (portrait + body) */
.teamf{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,72px); align-items:center; }
.teamf-portrait{ position:relative; }
.teamf-portrait .imgwrap{ aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; }
.teamf-portrait .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.teamf-portrait .name{ position:absolute; left:0; bottom:0; background:var(--ink); color:#fff; padding:18px 24px; max-width:78%; }
.teamf-portrait .name .k{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-bottom:6px; }
.teamf-portrait .name b{ font-family:var(--serif); font-weight:600; font-size:clamp(18px,1.6vw,22px); }
.teamf-body h2{ margin-top:16px; }
.teamf-body p{ color:var(--fg-soft); margin-top:18px; font-size:15px; line-height:1.8; }
.teamf-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px; }
.teamf-thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line); }
.teamf-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.teamf-thumb:hover img{ transform:scale(1.06); }
.teamf-thumb .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px; color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.04em; background:linear-gradient(transparent, rgba(18,18,18,.8)); }
@media (max-width:860px){ .teamf{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:480px){ .teamf-thumbs{ grid-template-columns:1fr 1fr; } }

/* Service / company row (image + body, optional flip) */
.srow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.srow.flip .srow-media{ order:2; }
.srow-media{ position:relative; }
.srow-media .imgwrap{ aspect-ratio:5/4; border:1px solid var(--line); overflow:hidden; }
.srow-media .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.srow-media .tab{ position:absolute; left:-14px; top:24px; width:46px; height:46px; background:var(--yellow); color:#121212; display:grid; place-items:center; font-size:28px; line-height:0; font-weight:700; }
.srow-body h2{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,3vw,44px); line-height:1.05; margin-top:16px; }
.srow-body p{ color:var(--fg-soft); margin-top:18px; font-size:15px; line-height:1.8; }
.srow-feats{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin:24px 0 28px; }
.srow-feats li{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; }
.srow-feats li svg{ width:16px; height:16px; color:var(--yellow-d); flex:none; }
@media (max-width:860px){ .srow{ grid-template-columns:1fr; gap:30px; } .srow.flip .srow-media{ order:0; } }
@media (max-width:480px){ .srow-feats{ grid-template-columns:1fr; } }

/* Accreditation strip */
.about-accred{ margin-top:clamp(48px,6vw,84px); border-top:1px solid var(--line); padding-top:clamp(30px,3vw,44px); display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.about-accred .lbl{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); max-width:14ch; }
.about-accred .logos{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,48px); }
.about-accred .logos img{ height:48px; width:auto; object-fit:contain; opacity:.7; filter:grayscale(1); transition:opacity .25s, filter .25s; }
.about-accred .logos img:hover{ opacity:1; filter:grayscale(0); }
@media (max-width:720px){ .about-accred{ grid-template-columns:1fr; gap:20px; } .about-accred .logos img{ height:40px; } }

/* Values grid */
.vals-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.valitem{ background:var(--paper); padding:clamp(28px,2.6vw,42px) clamp(24px,2.2vw,34px); }
.valitem .vn{ font-family:var(--serif); font-weight:600; font-size:40px; line-height:1; color:var(--yellow-d); margin-bottom:18px; }
.valitem h3{ margin-bottom:10px; }
.valitem p{ font-size:14px; color:var(--fg-soft); line-height:1.7; }
@media (max-width:820px){ .vals-grid{ grid-template-columns:1fr; } }

/* Why choose (media collage + list) */
.choose{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(34px,5vw,72px); align-items:center; }
.choose-media{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,1fr); gap:12px; }
.choose-media .imgwrap{ overflow:hidden; border:1px solid var(--line); }
.choose-media .imgwrap img{ width:100%; height:100%; object-fit:cover; }
.choose-media .imgwrap.a{ grid-row:1 / span 2; aspect-ratio:auto; }
.choose-media .imgwrap.b, .choose-media .imgwrap.c{ aspect-ratio:4/3; }
.choose-list{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,40px); }
.choose-item .ic{ width:46px; height:46px; border:1px solid var(--line); display:grid; place-items:center; color:var(--yellow-d); margin-bottom:16px; }
.choose-item .ic svg{ width:22px; height:22px; }
.choose-item h3{ font-size:17px; margin-bottom:8px; }
.choose-item p{ font-size:13.5px; color:var(--fg-soft); line-height:1.7; }
@media (max-width:980px){ .choose{ grid-template-columns:1fr; gap:36px; } }
@media (max-width:480px){ .choose-list{ grid-template-columns:1fr; } }

/* Team grid */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.tmember .pic{ aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); }
.tmember .pic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.tmember:hover .pic img{ transform:scale(1.05); }
.tmember .n{ font-family:var(--serif); font-weight:600; font-size:19px; margin-top:16px; }
.tmember .r{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
@media (max-width:820px){ .team-grid{ grid-template-columns:1fr 1fr; } }

/* ====================================================== NEWSLETTER */
.news{ background:var(--ink); color:#fff; padding:clamp(40px,5vw,72px) clamp(28px,4vw,72px); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.news h2{ color:#fff; font-size:clamp(28px,3vw,44px); }
.news p{ color:var(--d-soft); margin-top:14px; max-width:42ch; font-size:14.5px; }
.news form{ display:flex; gap:0; border:1px solid var(--d-line); }
.news input{ flex:1; background:none; border:none; color:#fff; font-family:var(--body); font-size:15px; padding:17px 20px; outline:none; }
.news input::placeholder{ color:var(--d-faint); }
.news .btn{ flex:none; }
@media (max-width:820px){ .news{ grid-template-columns:1fr; gap:26px; } }
@media (max-width:420px){ .news form{ flex-direction:column; } .news .btn{ justify-content:center; } }