/* Portada 3 – living-room hero approved by the owner; typography and buttons are real HTML. */
:root{--teal:#008396;--mint:#13deeb;--ink:#08243d}
header{background:#061e36}.topbar{min-height:88px}.top-phone{color:#14d7e7;font-weight:800;font-size:16px}
.hero{min-height:642px;display:flex;align-items:center;padding:62px 0 56px;isolation:isolate;background:#061e36;color:white}
.hero .wrap.hero-grid{width:min(1378px,calc(100% - 120px));margin:auto}
.hero-copy{width:min(740px,59%);max-width:none}
.hero-visual{inset:0 0 0 37%;height:100%}
.hero-visual>img{width:100%;height:100%;object-fit:cover;object-position:55% center}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#041b33 0%,#041b33fa 21%,#05233ad9 39%,#08253c70 56%,transparent 72%)}
.hero .photo-shade{display:none}
.hero .hero-copy{z-index:2}
.hero h1{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(48px,5.5vw,78px);letter-spacing:-.05em;line-height:1.0;margin:26px 0 18px}
.hero h1 em{color:#10d9e7;font-weight:750}
.hero .eyebrow{font-size:11px;color:#12dcea;letter-spacing:.17em;margin-bottom:18px}
.hero h2{font-size:clamp(20px,1.9vw,26px);line-height:1.35;font-weight:650;max-width:650px;letter-spacing:-.015em;margin:0 0 15px}
.hero-description{max-width:605px;font-size:17px;line-height:1.56;color:#e4ebf1}
.hero .actions{margin:24px 0 21px;gap:13px}
.hero .button{min-height:60px;padding:14px 23px;font-size:15px}
.hero .primary{background:#03dbe9;color:#052b40;font-weight:800}
.hero .outline{background:#041d3299}
.hero .credential{font-family:Arial,Helvetica,sans-serif;margin:23px 0 0;color:#fff;font-weight:800;font-size:clamp(17px,2.1vw,27px);line-height:1.23;display:flex;align-items:center;gap:17px;text-shadow:0 1px 12px #00182777}
.hero .credential svg{width:39px;height:39px;color:#0ce2ee;flex-shrink:0}
.service-strip .wrap{width:100%;max-width:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.service-strip .service-tile{min-width:0;display:flex;align-items:center;gap:12px;border-right:1px solid #dbe5ef;padding:24px 14px;font-size:13px;line-height:1.3;font-weight:700}
.service-strip .service-tile:first-child{padding-left:20px}.service-strip .service-tile:last-child{padding-right:20px}
.service-tile>svg:first-child{width:29px;height:29px;flex-shrink:0;color:#0093a3}
.service-tile>svg:last-child{width:17px;height:17px;flex-shrink:0;margin-left:auto;color:#0c314c}
.service-strip .service-tile:hover{background:#e8fafd}
@media(max-width:1250px){.hero .wrap.hero-grid{width:calc(100% - 90px)}.hero-copy{width:67%}.hero-visual{left:34%}.hero h1{font-size:64px}.service-strip .service-tile{padding:18px 11px;gap:8px;font-size:11px}.service-tile>svg:first-child{width:25px;height:25px}}
@media(max-width:940px){.hero{min-height:610px}.hero .wrap.hero-grid{width:calc(100% - 65px)}.hero-copy{width:75%}.hero-visual{left:25%}.service-strip .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}.service-strip .service-tile{font-size:12px;padding:16px 20px;border-bottom:1px solid #dde7ed}.service-strip .service-tile:first-child{padding-left:20px}}
@media(max-width:760px){.topbar{min-height:75px}.hero{min-height:650px;align-items:flex-end;padding:36px 0 40px}.hero .wrap.hero-grid{width:calc(100% - 40px)}.hero-copy{width:100%}.hero-visual{inset:0}.hero-visual>img{object-position:55% center}.hero:before{background:linear-gradient(90deg,#061e36db,#061e3666),linear-gradient(0deg,#061e36 0%,#061e36e6 38%,#061e3666 75%,#061e3628)}.hero h1{font-size:clamp(42px,9vw,62px);margin:16px 0}.hero h2{font-size:19px;line-height:1.35}.hero-description{font-size:14px}.hero .actions{margin:19px 0 15px}.hero .button{min-height:50px;font-size:13px;padding:11px 15px}.hero .credential{font-size:clamp(15px,4vw,19px);margin-top:18px;gap:10px}.hero .credential svg{width:27px;height:27px}.service-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.service-strip .service-tile,.service-strip .service-tile:first-child{font-size:12px;padding:15px 9px 15px 12px;gap:7px}.service-tile>svg:first-child{width:23px;height:23px}.service-tile>svg:last-child{width:14px;height:14px}}
@media(max-width:370px){.hero{min-height:670px}.hero .button{padding:10px 12px}}

/* Revisión 4: panorama original más abierto (sofá, mesa y TV) */
.hero-visual{inset:0;height:100%;margin:0}
.hero-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 51%;border-radius:0}
.hero:before{background:linear-gradient(90deg, #041b33 0%, #041b33fb 25%, #041b33bc 44%, #041b334d 58%, transparent 74%)}
@media(max-width:760px){.hero-visual{inset:0}.hero-visual>img{object-position:70% center}.hero:before{background:linear-gradient(0deg, #041b33 0%,#041b33e8 48%,#041b3365 77%,#041b3333)}}

/* Revision 5 — visual original del salón, SIN doble degradado ni recorte.
   La fotografía panorámica incluye de origen su propia zona azul a la izquierda.
   Por ello NO debemos añadir una segunda máscara ni usar object-fit:cover.
*/
.hero{
  height:clamp(594px,40.4vw,692px);
  min-height:0;
  box-sizing:border-box;
  padding:0;
  background:#061b32;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.hero::before{content:none!important;display:none!important}
.hero .hero-visual{position:absolute;inset:0;margin:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .hero-visual>img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:fill; /* imprescindible: imagen panorámica COMPLETA, sin recortes */
  object-position:center;
  border:0;border-radius:0;
}
.hero .photo-shade{display:none!important}
.hero .hero-copy{position:relative;z-index:2;width:min(640px,58%);max-width:none}
.hero .wrap.hero-grid{width:min(1516px,calc(100% - 138px));margin-inline:auto;position:relative;z-index:1}
.hero h1{font-size:clamp(48px,5.2vw,80px);line-height:1.01;letter-spacing:-.05em}
.hero h2{font-size:clamp(18px,1.5vw,25px);line-height:1.35;max-width:610px}
.hero-description{font-size:clamp(14px,1.0vw,17px);max-width:560px}
.hero .credential{font-size:clamp(16px,1.55vw,25px)}
/* Fotografía real del trabajo. No mostrar una mesa ilustrativa. */
.furniture-photo{overflow:hidden;border-radius:11px;background:#dcebed;display:flex;align-items:center;justify-content:center;min-height:520px}
.furniture-photo img{display:block!important;width:auto!important;max-width:100%!important;height:600px!important;max-height:600px;object-fit:contain!important;object-position:center!important;border-radius:0!important}
.furniture-photo .photo-label{bottom:18px;left:18px;right:18px}
.furniture-photo .photo-credit{display:none}
@media(max-width:1180px){
 .hero{height:auto;min-height:560px;padding:48px 0 52px}
 .hero .wrap.hero-grid{width:calc(100% - 70px)}
 .hero .hero-copy{width:min(650px,67%)}
 .hero h1{font-size:clamp(49px,6vw,66px)}
 .hero .credential{font-size:19px}
}
@media(max-width:760px){
 .hero{min-height:0;height:auto;display:flex;flex-direction:column;padding:0 0 33px;align-items:stretch;background:#061b32}
 .hero .hero-visual{position:relative;inset:auto;width:100%;height:auto;order:-1;display:block;flex:none}
 .hero .hero-visual>img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
 .hero .wrap.hero-grid{order:1;display:flex;flex-direction:column;width:100%;margin:0}
 .hero .hero-copy{width:100%;max-width:none;padding:16px 20px 0}
 .hero h1{font-size:clamp(44px,9vw,60px);margin:12px 0 13px}
 .hero h2{font-size:18px;line-height:1.34}
 .hero .eyebrow{margin:0 0 9px}
 .hero-description{font-size:14px;line-height:1.55}
 .hero .actions{margin:20px 0 17px}
 .hero .credential{font-size:17px;line-height:1.3;margin:14px 0 0}
 .furniture-photo{min-height:0;height:auto;padding:0 12px 60px}
 .furniture-photo img{height:auto!important;width:auto!important;max-height:520px!important;max-width:100%!important;object-fit:contain!important}
 .furniture-photo .photo-label{bottom:12px;left:12px;right:12px}
}

/* Versión aprobada: usa literalmente la captura elegida como portada.
   Esta imagen procede de la vista que el cliente ha aprobado y se conserva
   íntegra, sin recortar salón, mobiliario ni añadir zonas negras.
   El contenido de texto y enlaces sigue estando en HTML para accesibilidad.
*/
.hero{
  width:100%;height:auto!important;min-height:0!important;
  aspect-ratio:1704/652;display:block;
  padding:0!important;margin:0;
  position:relative;overflow:hidden;background:#061b32;
}
.hero .hero-visual{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
.hero .hero-visual picture{display:block;width:100%;height:100%}
.hero .hero-visual picture>img{display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;border-radius:0!important;object-position:center!important}
.hero .wrap.hero-grid{position:absolute;inset:0;width:100%!important;height:100%;margin:0;z-index:2}
.hero .hero-copy{position:absolute!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;white-space:nowrap}
.hero .hero-hotspot{display:block;position:absolute;z-index:5;background:transparent;cursor:pointer;border-radius:7px}
.hero .hero-hotspot:focus-visible{outline:3px solid #00dbe8;outline-offset:4px}
.hero .hero-hotspot.primary-hotspot{left:7.7%;top:72.2%;width:14.1%;height:9.5%}
.hero .hero-hotspot.phone-hotspot{left:22.1%;top:72.2%;width:17%;height:9.5%}
.hero::before,.hero .photo-shade{display:none!important;content:none!important}
/* Ajustar la cabecera, para que el logo tenga el mismo espacio que en el diseño aprobado. */
header .topbar.wrap{width:min(1450px,calc(100% - 110px))}
@media(max-width:1180px){.hero{min-height:0!important;padding:0!important}.hero .hero-visual{position:absolute}}
@media(max-width:760px){
  header .topbar.wrap{width:calc(100% - 40px)}
  .hero{height:auto!important;min-height:0!important;aspect-ratio:auto;display:flex;flex-direction:column;background:#061b32;padding:0 0 30px!important;overflow:hidden}
  .hero .hero-visual{position:relative;inset:auto;order:0;width:100%;height:auto;min-height:0}
  .hero .hero-visual picture{display:block;width:100%;height:auto}
  .hero .hero-visual picture>img{display:block;width:100%;height:auto!important;object-fit:contain!important}
  .hero .wrap.hero-grid{order:1;position:relative;inset:auto;width:100%!important;height:auto;display:block;padding:0;margin:0}
  .hero .hero-copy{position:relative!important;clip:auto!important;clip-path:none!important;display:block!important;white-space:normal!important;width:100%!important;height:auto!important;max-width:none;overflow:visible!important;margin:0!important;padding:13px 20px 0!important;opacity:1}
  .hero .hero-hotspot{display:none}
}
/* La fotografía delante del fondo, con las áreas clicables por encima. */
.hero .hero-visual{z-index:3}
.hero .hero-hotspot{z-index:6}
/* La portada española elegida contiene tipografía en la propia vista aprobada.
   En inglés usamos el salón panorámico y titulares HTML reales para no mostrar
   texto español a los visitantes extranjeros. */
@media(min-width:761px){
 html[lang="en"] .hero{height:clamp(550px,39vw,680px)!important;aspect-ratio:auto;display:flex;align-items:center}
 html[lang="en"] .hero .wrap.hero-grid{position:relative;inset:auto;display:flex;align-items:center;width:min(1516px,calc(100% - 138px))!important;height:auto;margin-inline:auto;z-index:4}
 html[lang="en"] .hero .hero-copy{position:relative!important;clip:auto!important;clip-path:none!important;display:block!important;width:min(640px,59%)!important;height:auto!important;max-width:none;overflow:visible!important;white-space:normal!important;margin:0!important;padding:0!important}
 html[lang="en"] .hero .hero-hotspot{display:none}
}
/* Fondo directo: evita conflictos de capas de los estilos antiguos. */
@media(min-width:761px){
 html[lang="es"] .hero{background:#061b32 url("assets/portada-aprobada.webp") center / 100% 100% no-repeat!important}
 html[lang="en"] .hero{background:#061b32 url("assets/portada-salon-amplia.webp") center / 100% 100% no-repeat!important}
 .hero .hero-visual{display:none!important}
}
@media(max-width:760px){
 .hero{background-image:none!important}
 .hero .hero-visual{z-index:1}
 .hero .wrap.hero-grid{z-index:2}
}