/* Estética · estilos del template. Requiere ../tokens.css + base.css.
   Se construye sección por sección (medido de centremarsea.com). */

/* Fuente del logo/wordmark (serif editorial de alto contraste) — placeholder del logo gráfico del cliente. */
:root{ --f-logo: 'Playfair Display', Georgia, serif; }

/* ---------- NAV (sticky. Al hover, todo el header invierte a granate en 0.2s) ---------- */
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:71px;padding:0 var(--pad-x);background:var(--bg);position:sticky;top:0;z-index:30;transition:background .2s ease-in-out}
.site-nav:hover{background:var(--maroon)}
.site-nav:hover .brand,.site-nav:hover .navlinks a,.site-nav:hover .lang,.site-nav:hover .nav-cta,.site-nav:hover .menu-btn{color:var(--on-maroon)}
.site-nav:hover .navright{border-color:rgba(244,235,223,.28)}
.brand{font-family:var(--f-logo);font-size:1.6rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);transition:color .2s ease-in-out}
.navlinks{display:flex;gap:26px;align-items:center}
/* Nav items con mega-menú (desplegable granate al hover) */
.nav-item{position:relative;display:flex;align-items:center}
/* Puente invisible bajo el nav-item que mantiene el hover al pasar hacia el panel */
.nav-item::after{content:'';position:absolute;top:100%;left:-16px;right:-16px;height:24px}
.mega-panel{position:fixed;top:71px;left:0;right:0;background:var(--maroon);color:var(--on-maroon);padding:clamp(60px,10vh,120px) var(--pad-x) clamp(60px,10vh,110px);opacity:0;pointer-events:none;transition:opacity .28s ease-in-out;z-index:29}
.nav-item:hover .mega-panel,.mega-panel:hover{opacity:1;pointer-events:auto}
.mega-label{display:block;font-family:var(--f-display);font-weight:400;font-size:14.4px;text-transform:uppercase;letter-spacing:.02em;color:var(--on-maroon);margin:0 0 48px}
.mega-cols{display:grid;grid-template-columns:repeat(2,minmax(0,300px));column-gap:60px;row-gap:8px}
.mega-cols.mega-cols-4{grid-template-columns:repeat(4,minmax(0,240px))}
.mega-col{display:flex;flex-direction:column;gap:8px}
.mega-col-head{font-family:var(--f-display);font-weight:600;font-size:14.4px;text-transform:none;color:var(--on-maroon);margin-bottom:6px}
.mega-cols a,.mega-col a{font-family:var(--f-display);font-weight:400;font-size:14.4px;color:var(--on-maroon);text-decoration:none;transition:opacity .2s ease}
.mega-cols a:hover,.mega-col a:hover{opacity:.7}
/* Al abrir un mega-menú, el nav completo se pone granate igual que en hover del nav */
.nav-item:hover ~ .navright,.mega-panel:hover ~ .navright{border-color:rgba(244,235,223,.28)}
.site-nav:has(.nav-item:hover,.mega-panel:hover){background:var(--maroon)}
.site-nav:has(.nav-item:hover,.mega-panel:hover) .brand,.site-nav:has(.nav-item:hover,.mega-panel:hover) .navlinks a,.site-nav:has(.nav-item:hover,.mega-panel:hover) .lang,.site-nav:has(.nav-item:hover,.mega-panel:hover) .nav-cta,.site-nav:has(.nav-item:hover,.mega-panel:hover) .menu-btn{color:var(--on-maroon)}
.site-nav:has(.nav-item:hover,.mega-panel:hover) .navright{border-color:rgba(244,235,223,.28)}
.navlinks a{font-family:var(--f-display);font-size:11.2px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .2s ease-in-out}
.navlinks a:hover{text-decoration:underline;text-underline-offset:4px}
.navright{display:flex;align-items:center;gap:20px;border-left:1px solid var(--line);padding-left:22px;transition:border-color .2s ease-in-out}
.lang{font-family:var(--f-display);font-size:11px;letter-spacing:.05em;transition:color .2s ease-in-out}
/* CTA del nav: texto plano (Marsea no usa píldora aquí; el header entero invierte a granate en hover) */
.nav-cta{font-family:var(--f-display);font-size:11.2px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);text-decoration:none;transition:color .2s ease-in-out}
.menu-btn{font-family:var(--f-display);font-size:11.2px;text-transform:uppercase;letter-spacing:.05em;background:none;border:0;color:var(--ink);cursor:pointer;transition:color .2s ease-in-out}

/* ---------- HERO (foto a sangre, alto = viewport − nav; wordmark ancho abajo) ---------- */
.hero{position:relative;height:calc(100vh - 71px);min-height:540px;overflow:hidden}
.hero-img{position:absolute;inset:0;background:#A8A186}   /* marcador de foto (verde-marfil apagado, P2) */
.hero-content{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:4%}   /* ~40px de aire al fondo, como Marsea */
.hero-logo{font-family:var(--f-logo);font-weight:400;color:var(--on-maroon);font-size:clamp(3.5rem,17vw,20rem);line-height:.82;letter-spacing:.005em;margin:0;
  opacity:0;transform:translateX(-5%);animation:logoIn 1.1s var(--ease) .25s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
.hero-labels{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:16px;font-family:var(--f-display);font-size:12.8px;text-transform:uppercase;color:var(--on-maroon)}

/* ---------- INTRO (enunciado centrado + botón outline) ---------- */
.intro{display:flex;justify-content:center;padding:clamp(110px,26vh,272px) var(--pad-x)}
.intro-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}
.intro-text{max-width:390px;margin:0;font-family:var(--f-display);font-weight:400;font-size:19.2px;line-height:28.8px;color:var(--ink)}

/* Botón outline (pill con borde 1px). Al hover se rellena de tinta con texto crema. */
.btn-outline{display:inline-flex;align-items:center;font-family:var(--f-display);font-size:12.8px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);background:var(--bg);border:1px solid var(--ink);border-radius:var(--radius-pill);padding:11px 27px;text-decoration:none;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.btn-outline:hover{background:var(--ink);color:var(--bg)}

/* ---------- BANDA DE SOLUCIONES (ticker + zoom en marco) ---------- */
.soluciones{padding:8px 0 96px}
.ticker{overflow:hidden;width:100%}
.ticker-track{display:flex;gap:16px;padding:0 16px;will-change:transform}
.sol-card{flex:0 0 auto;width:var(--card-w,400px)}
.frame{width:100%;aspect-ratio:400/520;overflow:hidden}   /* recorta el zoom */
.sol-img{width:100%;height:100%;transition:transform .5s var(--ease)}
.sol-card:hover .sol-img{transform:scale(1.05)}            /* zoom-in-frame, 0.5s (medido) */
.sol-cap{margin:14px 0 0;font-family:var(--f-display);font-weight:400;font-size:14.4px;color:var(--ink)}

.sol-controls{display:flex;flex-direction:column;align-items:center;gap:26px;margin-top:56px}
.sol-arrows{display:flex;gap:10px}
.arrow{width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.arrow:hover{background:var(--ink);color:var(--bg)}

/* ---------- PREOCUPACIONES (marco que revela imagen al hover + lista numerada dcha) ---------- */
.preoc{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,96px);padding:clamp(80px,10vh,120px) var(--pad-x)}
.preoc-media{overflow:hidden;aspect-ratio:953/926}
.preoc-img{transition:transform .55s var(--ease)}          /* visible siempre; hace zoom al pasar por la lista */
.preoc.show .preoc-img{transform:scale(1.05)}             /* zoom-in-frame al hover de un item */
.preoc-right{display:flex;flex-direction:column;align-items:center;gap:44px}
.preoc-list{list-style:none;margin:0;padding:0;text-align:center}
.preoc-item a{font-family:var(--f-display);font-weight:300;font-size:25.6px;line-height:38.4px;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:font-weight .2s ease}
.preoc-item sup{font-size:.42em;font-weight:400;margin-right:.5em;vertical-align:.8em}
.preoc-item:hover a{font-weight:600}   /* item en negrita al hover (medido) */

/* ---------- IMÁGENES FLOTANTES (parallax de ratón + reveal "agua subiendo") ---------- */
.flotantes{position:relative;min-height:1237px;display:flex;align-items:center;justify-content:center;padding:0 var(--pad-x);overflow:hidden}
.flot-mob{display:none}   /* foto vertical dentro de .float-inner, solo visible en mobile (ver @media) */
.float-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:30px;max-width:480px}
.eyebrow{margin:0;font-family:var(--f-display);font-size:12.8px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.float-statement{margin:0;font-family:var(--f-display);font-weight:400;font-size:24px;line-height:31.2px;color:var(--ink)}
.float-img{position:absolute;will-change:transform;z-index:0}
.float-img .frame{overflow:hidden}

/* ---------- ENFOQUE (foto a sangre + carrusel de puntos + flechas) ---------- */
.enfoque{position:relative;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.enfoque-bg{position:absolute;inset:0;background:#6B7358}   /* la foto cambia via JS (data-approach) al pulsar las flechas */
.enfoque-label{position:absolute;top:clamp(24px,4vh,40px);left:var(--pad-x);color:var(--on-maroon)}
.enfoque-content{position:relative;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:22px}
.enfoque-num{font-family:var(--f-display);font-size:12.8px;opacity:.85}
.enfoque-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.4vw,36.8px);line-height:1.05;text-transform:uppercase;color:#fff}
.enfoque-arrows{position:absolute;bottom:clamp(28px,5vh,56px);left:var(--pad-x)}
/* Variantes sobre foto oscura: crema por defecto, se rellena crema al hover */
.btn-on-photo{color:var(--on-maroon);background:transparent;border-color:var(--on-maroon)}
.btn-on-photo:hover{background:var(--on-maroon);color:var(--maroon)}
.arrow-on-photo{border-color:var(--on-maroon);color:var(--on-maroon)}
.arrow-on-photo:hover{background:var(--on-maroon);color:var(--maroon)}

/* ---------- FOOTER (granate: contacto + pie) ---------- */
.footer{background:var(--maroon);color:var(--on-maroon);--line-cream:rgba(244,235,223,.45)}
.foot-contact{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--line-cream)}
.foot-illus{display:flex;align-items:center;justify-content:center;padding:60px;border-right:1.5px solid var(--line-cream)}
.casita{width:min(300px,60%);height:auto;color:var(--on-maroon)}
.casita path{stroke-dasharray:640;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}   /* visible por defecto */
.has-js .foot-illus:not(.in) .casita path{stroke-dashoffset:640}                                       /* con JS y aún fuera de viewport, oculta */
.foot-illus.in .casita path{stroke-dashoffset:0}                                                       /* visible al entrar en viewport (asegura estado final aunque la transition falle) */
.foot-formwrap{padding:clamp(40px,5vw,72px) var(--pad-x)}
.foot-head{margin:0 0 40px;font-family:var(--f-display);font-weight:400;font-size:20.8px;line-height:1.35;color:#fff;max-width:24ch}
.foot-form{display:grid;grid-template-columns:1fr 1fr}
.ff{border-top:1.5px solid var(--line-cream)}
.ff:nth-child(2),.ff:nth-child(4){border-left:1.5px solid var(--line-cream)}   /* divisor vertical solo entre columnas */
.ff-wide{grid-column:1 / -1}
.ff input,.ff textarea{width:100%;background:transparent;border:0;color:var(--on-maroon);font-family:var(--f-text);font-size:15px;padding:16px 22px;outline:none;resize:none}
.ff:nth-child(odd) input,.ff-wide textarea{padding-left:0}   /* col izq y mensaje alineados al borde (texto no pisa la línea) */
.ff input::placeholder,.ff textarea::placeholder{color:var(--on-maroon);opacity:.75;font-family:var(--f-display);font-size:13px;text-transform:none}
.btn-solid{grid-column:1 / -1;justify-self:end;margin-top:36px;font-family:var(--f-display);font-size:12.8px;text-transform:uppercase;letter-spacing:.03em;background:var(--on-maroon);color:var(--maroon);border:1px solid var(--on-maroon);border-radius:var(--radius-pill);padding:13px 40px;cursor:pointer;transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.btn-solid:hover{background:transparent;color:var(--on-maroon)}

.foot-info{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;padding:clamp(60px,8vh,96px) var(--pad-x) 40px;border-top:1.5px solid var(--line-cream)}
.foot-word{font-family:var(--f-logo);font-size:clamp(4rem,13vw,12rem);line-height:.8;color:var(--on-maroon);text-decoration:none}
.foot-cols{display:flex;flex-wrap:wrap;gap:40px 56px;align-self:start}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-cols a,.foot-cols li{font-family:var(--f-display);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--on-maroon);text-decoration:none}
.foot-cols a{opacity:.85;transition:opacity .2s ease}
.foot-cols a:hover{opacity:1}
.foot-cols .col-head{opacity:.6}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;padding:22px var(--pad-x);border-top:1.5px solid var(--line-cream);font-family:var(--f-display);font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.foot-legal a{color:var(--on-maroon);text-decoration:none;opacity:.85}

/* ---------- PÁGINA DE DETALLE (preocupación / solución) ---------- */
/* Hero CENTRADO: número + título + intro, con imágenes flotantes alrededor */
.dt-hero{position:relative;overflow:hidden;padding:clamp(120px,20vh,220px) var(--pad-x) clamp(90px,15vh,180px)}
.dt-hero-inner{max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:1}
.dt-num{font-family:var(--f-text);font-size:14.4px;color:var(--ink);opacity:.55}
.dt-title{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,6vw,56px);line-height:1.02;margin:.2em 0 .5em}
.dt-intro{font-family:var(--f-display);font-weight:400;font-size:16px;line-height:1.6;color:var(--ink);margin:0}

/* Presentación: imagen a sangre (mitad izq, alto completo) + texto derecha centrado vertical */
.dt-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.dt-split-media{overflow:hidden}
.dt-split-media .ph{height:100%}
.dt-split-text{align-self:center;padding:clamp(48px,6vw,96px) var(--pad-x)}
.dt-h{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.1;text-transform:uppercase;margin:0 0 26px}
.dt-p{font-family:var(--f-text);font-size:16px;line-height:1.68;color:var(--ink);margin:0}

/* Causas: heading izq + ACORDEÓN derecha */
.dt-causas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);padding:clamp(70px,10vh,130px) var(--pad-x)}
.dt-causas .dt-h{align-self:start;max-width:14ch}
.acc-item{border-top:1px solid var(--line)}
.acc-item:last-child{border-bottom:1px solid var(--line)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;cursor:pointer;padding:24px 0;text-align:left;font-family:var(--f-display);font-weight:400;font-size:19.2px;text-transform:uppercase;color:var(--ink)}
.acc-sign{flex:0 0 auto;transition:transform .3s var(--ease)}
.acc-item.open .acc-sign{transform:rotate(45deg)}
.acc-panel{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.acc-panel p{margin:0;padding:0 0 24px;font-family:var(--f-text);font-size:14.4px;line-height:1.6;color:var(--ink);opacity:.85;max-width:46ch}

/* Soluciones: heading+intro izq (sticky) + grid 2-col numerado derecha */
.dt-sols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);padding:clamp(70px,10vh,130px) var(--pad-x);align-items:start}
.dt-sols-left{position:sticky;top:110px}
.dt-sols-left .dt-h{max-width:16ch}
.dt-sols-p{font-family:var(--f-text);font-size:16px;line-height:1.65;color:var(--ink);margin:24px 0 0;max-width:42ch}
.sol-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sol-imgcard{text-decoration:none}
.sol-imgframe{aspect-ratio:311/420;overflow:hidden}
.sol-imgcard .ph{transition:transform .5s var(--ease)}
.sol-imgcard:hover .sol-imgframe .ph{transform:scale(1.05)}
.sol-imgcap{margin:12px 0 0;font-family:var(--f-display);font-size:13px;text-transform:uppercase;color:var(--ink)}
.sol-imgcap b{font-weight:400;opacity:.5;margin-right:8px}

.dt-band{padding:0}
.dt-band .ph{width:100%;aspect-ratio:1809/683}
.dt-related{padding:clamp(60px,8vh,100px) 0 clamp(80px,11vh,120px)}
.dt-related .dt-h{padding:0 var(--pad-x);margin-bottom:34px}

/* ---------- PÁGINA TARIFAS ---------- */
.tf{display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,6vw,96px);padding:clamp(40px,6vh,80px) var(--pad-x) clamp(80px,10vh,120px);align-items:start}
.tf-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:clamp(48px,10vh,120px)}
.tf-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(36px,5vw,64px);line-height:.95;text-transform:uppercase;color:var(--ink)}
.tf-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tf-nav a{position:relative;display:inline-block;font-family:var(--f-display);font-size:15px;color:var(--ink);text-decoration:none;padding-left:0;transition:padding-left .35s var(--ease),opacity .2s ease}
.tf-nav a::before{content:"";position:absolute;left:0;top:50%;width:22px;height:1px;background:currentColor;opacity:0;transform:translate(-6px,-50%);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tf-nav a::after{content:"";position:absolute;left:16px;top:50%;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;opacity:0;transform:translate(-6px,-50%) rotate(45deg);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tf-nav a:hover,.tf-nav a.active{padding-left:34px}
.tf-nav a:hover::before,.tf-nav a.active::before{opacity:1;transform:translate(0,-50%)}
.tf-nav a:hover::after,.tf-nav a.active::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}

.tf-body{display:flex;flex-direction:column;gap:clamp(48px,7vh,80px)}
.tf-cat{border-top:1px solid var(--line);padding-top:24px}
.tf-cat-title{margin:0 0 8px;font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--ink);padding:0 0 16px}
.tf-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--line);font-family:var(--f-display);font-size:15px;color:var(--ink)}
.tf-row .name{font-weight:400}
.tf-row .price{font-family:var(--f-display);font-weight:400;color:var(--ink);white-space:nowrap}
.tf-sub{display:grid;grid-template-columns:1fr auto;gap:20px;padding:6px 0;font-family:var(--f-display);font-size:15px;color:var(--ink);opacity:.85}
.tf-sub-name{padding-left:22px}
.tf-group{padding:18px 0;border-top:1px solid var(--line)}
.tf-group>.name{font-family:var(--f-display);font-weight:400;font-size:15px;padding-bottom:8px;display:block}

/* Nav invertido cuando la página arranca sobre hero granate (Nosotros). Al hover, invierte a crema. */
.page-about .site-nav{background:var(--maroon)}
.page-about .site-nav .brand,.page-about .site-nav .navlinks a,.page-about .site-nav .lang,.page-about .site-nav .nav-cta,.page-about .site-nav .menu-btn{color:var(--on-maroon)}
.page-about .site-nav .navright{border-color:rgba(244,235,223,.28)}
.page-about .site-nav:hover{background:var(--bg)}
.page-about .site-nav:hover .brand,.page-about .site-nav:hover .navlinks a,.page-about .site-nav:hover .lang,.page-about .site-nav:hover .nav-cta,.page-about .site-nav:hover .menu-btn{color:var(--ink)}
.page-about .site-nav:hover .navright{border-color:var(--line)}

/* ---------- PÁGINA NOSOTROS ---------- */
/* Hero: granate a sangre; contiene solo un video/ilustración horizontal centrado arriba (633×150). */
.ab-hero{background:var(--maroon);height:calc(100vh - 71px);min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ab-hero-casita{width:min(380px,32vw);height:auto;color:var(--on-maroon)}
.ab-hero.in .casita path{stroke-dashoffset:0}

/* Bloque manifiesto: granate a sangre, párrafo Zalando 28.8px BLANCO centrado (con label opcional 16px). */
.ab-manifest{background:var(--maroon);color:#fff;padding:clamp(80px,12vh,160px) var(--pad-x);display:flex;flex-direction:column;align-items:center;text-align:center;gap:44px}
.ab-manifest-label{margin:0;font-family:var(--f-display);font-weight:400;font-size:16px;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.ab-manifest-p{margin:0;max-width:780px;font-family:var(--f-display);font-weight:400;font-size:clamp(16px,1.4vw,19.2px);line-height:1.55;color:#fff}

/* Split granate: título Zalando 43.2px BLANCO izq + imagen a sangre dcha (100vh). */
.ab-split{background:var(--maroon);color:#fff;display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.ab-split-text{align-self:center;padding:clamp(48px,6vw,96px) var(--pad-x);display:flex;flex-direction:column;gap:28px;max-width:520px}
.ab-split .dt-h{color:#fff;margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.6vw,32px);line-height:1.1;text-transform:uppercase}
.ab-split .dt-p{color:#fff;opacity:.95;font-family:var(--f-display);font-size:15px;line-height:1.55}
.ab-split-media{overflow:hidden}
.ab-split-media .ph{height:100%;background:#6B7358}

/* ---------- PÁGINA DE DETALLE DE SOLUCIÓN ---------- */
/* Hero: 2 cols 1:1; imagen a sangre izq, dcha breadcrumb + título + intro */
.sh{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 71px)}
.sh-media{overflow:hidden}
.sh-media .ph{height:100%}
.sh-text{align-self:center;padding:clamp(48px,6vw,96px) var(--pad-x);display:flex;flex-direction:column;gap:clamp(60px,10vh,140px)}
.sh-bread{font-family:var(--f-text);font-size:14.4px;color:var(--ink);opacity:.7}
.sh-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,4vw,59.2px);line-height:1;text-transform:none}
.sh-intro{margin:0;font-family:var(--f-text);font-size:16px;line-height:1.65;color:var(--ink);max-width:52ch}

/* Enunciado destacado + CTA (bloque centrado) */
.sol-emph{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px;padding:clamp(70px,11vh,140px) var(--pad-x)}
.sol-emph-p{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--ink);max-width:52ch}

/* Split con imagen a la DERECHA (espejo del de preocupación) */
.dt-split.right{grid-template-columns:1fr 1fr}
.dt-split.right .dt-split-text{order:0}
.dt-split.right .dt-split-media{order:1}
.dt-p .bul{display:block;padding-left:18px;text-indent:-18px}

/* Resultados: heading arriba-izq + 2 párrafos en 2 col alineados a la izq */
.sol-res{padding:clamp(60px,9vh,120px) var(--pad-x) 0}
.sol-res-head .dt-h{margin:0 0 40px;font-size:clamp(28px,3.2vw,40px)}
.sol-res-head-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 60px;text-align:left;max-width:none}
.sol-res-head-cols p{margin:0;font-family:var(--f-text);font-size:16px;line-height:1.55;padding-left:clamp(20px,10%,150px)}
/* Banner del resultado: imagen a sangre lateral + badge crema abajo-izq + flechas debajo */
.sol-res-band{position:relative;aspect-ratio:1809/670;overflow:hidden;margin:clamp(32px,4vh,64px) calc(var(--pad-x) * -1) 0}
.sol-res-band .ph{position:absolute;inset:0;background:#6B7358}
.sol-res-badge{position:absolute;left:0;bottom:0;background:var(--bg);padding:20px 40px;display:flex;align-items:baseline;gap:20px;border:1px solid var(--line);border-left:0;border-bottom:0}
.sol-res-badge-num{font-family:var(--f-text);font-size:14.4px;opacity:.55}
.sol-res-badge-t{font-family:var(--f-display);font-weight:600;font-size:14.4px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.sol-res-arrows{display:flex;gap:10px;padding:32px 0 clamp(80px,10vh,128px)}

/* Precauciones */
.sol-prec{display:grid;grid-template-columns:1fr 2fr;gap:clamp(30px,5vw,80px);padding:clamp(60px,9vh,120px) var(--pad-x)}
.sol-prec-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px}
.sol-prec-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sol-prec-cols li{font-family:var(--f-text);font-size:14.4px;line-height:1.55;padding-left:14px;position:relative;color:var(--ink);opacity:.85}
.sol-prec-cols li::before{content:'•';position:absolute;left:0;top:0}

/* ---------- GRID DE SOLUCIONES (3 col × 2 filas; card 592×926, gap col 16 / row 32).
   Comportamiento: la imagen cubre la card por defecto; al hover (desktop) o al tap (mobile)
   la imagen se atenúa y aparece la lista de tratamientos superpuesta. */
.sol-cat{display:grid;grid-template-columns:repeat(3,1fr);column-gap:16px;row-gap:32px;padding:48px var(--pad-x) 104px}
.sol-cat-card{position:relative;background:transparent;min-height:926px;display:grid;grid-template-rows:1fr auto;padding:0}
.sol-cat-view{position:relative;overflow:hidden}
.sol-cat-img{position:absolute;inset:0;overflow:hidden}
.sol-cat-img .ph{width:100%;height:100%;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.sol-cat-card:hover .sol-cat-img .ph{opacity:0}
.sol-list{position:absolute;inset:0;list-style:none;margin:0;padding:32px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.sol-cat-card:hover .sol-list{opacity:1;pointer-events:auto}
/* Link con flecha "⟶" que aparece a la izquierda al hover, y desplaza el texto a la derecha */
.sol-list a{position:relative;display:inline-block;font-family:var(--f-display);font-weight:400;font-size:14.4px;color:var(--ink);text-decoration:none;padding-left:0;transition:padding-left .35s var(--ease)}
.sol-list a::before{content:"";position:absolute;left:0;top:50%;width:22px;height:1px;background:currentColor;opacity:0;transform:translate(-6px,-50%);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sol-list a::after{content:"";position:absolute;left:16px;top:50%;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;opacity:0;transform:translate(-6px,-50%) rotate(45deg);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sol-list a:hover{padding-left:34px}
.sol-list a:hover::before,.sol-list a:hover::after{opacity:1;transform:translate(0,-50%) rotate(0)}
.sol-list a:hover::after{transform:translate(0,-50%) rotate(45deg)}
.sol-cat-foot{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:16px;padding:20px 0 24px}
.sol-cat-num{font-family:var(--f-text);font-size:14.4px;color:var(--ink);opacity:.55}
.sol-cat-title{margin:0;font-family:var(--f-display);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}

/* ---------- GRID DE CATEGORÍA (página listado de preocupaciones) ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:14px;row-gap:56px;padding:40px var(--pad-x) 104px}
.cat-card{text-decoration:none}
.cat-frame{aspect-ratio:443/530;overflow:hidden}
.cat-img{width:100%;height:100%;transition:transform .5s var(--ease)}
.cat-card:hover .cat-img{transform:scale(1.05)}   /* zoom-in-frame */
.cat-cap{margin:14px 0 0;font-family:var(--f-display);font-weight:400;font-size:16px;text-transform:uppercase;color:var(--ink)}

/* Breakpoint intermedio: reduce columnas de listados en pantallas medianas */
@media (max-width:1200px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .sol-cat{grid-template-columns:repeat(2,1fr)}
}

/* Panel del menú mobile (granate a sangre, todos los links). Estilos siempre activos; el
   panel está oculto vía transform hasta que se le añade .open. */
.mob-menu{position:fixed;inset:0;background:var(--maroon);color:var(--on-maroon);z-index:40;padding:96px 22px 40px;overflow-y:auto;transform:translateY(-100%);transition:transform .35s var(--ease);visibility:hidden}
.mob-menu.open{transform:translateY(0);visibility:visible}
.mob-menu-close{position:absolute;top:22px;right:22px;background:none;border:0;color:var(--on-maroon);font-family:var(--f-display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:8px 0}
.mob-menu-brand{position:absolute;top:22px;left:22px;font-family:var(--f-logo);font-size:24px;color:var(--on-maroon);text-decoration:none}
.mob-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mob-nav>li>a{display:block;padding:14px 0;font-family:var(--f-display);font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--on-maroon);text-decoration:none}
/* Fila con link + toggle: link va a la página de listado; el caret abre el submenu */
.mob-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mob-row>a{flex:1;padding:14px 0;font-family:var(--f-display);font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--on-maroon);text-decoration:none}
.mob-toggle{background:none;border:0;color:var(--on-maroon);cursor:pointer;padding:14px 8px;font-size:16px;line-height:1;transition:transform .2s ease}
.mob-toggle.open{transform:rotate(180deg)}
.mob-sub{list-style:none;margin:0 0 14px;padding:0 0 6px 8px;display:none;flex-direction:column;gap:8px}
.mob-sub.open{display:flex}
.mob-sub a{font-family:var(--f-display);font-size:14px;color:var(--on-maroon);text-decoration:none;padding:4px 0;opacity:.9}
.mob-menu-foot{margin-top:36px;padding-top:24px;border-top:1px solid rgba(244,235,223,.22);font-family:var(--f-display);font-size:13px;color:var(--on-maroon);display:flex;flex-direction:column;gap:6px}
.mob-menu-foot a{color:var(--on-maroon);text-decoration:none}
body.no-scroll{overflow:hidden}

/* ============ MOBILE (≤ 820px) — ajustes globales según screenshots de Marsea ============ */
@media (max-width:820px){
  :root{ --pad-x:22px; }

  /* --- Nav: brand izq + botón "MENÚ" dcha; los demás links y CTA pasan al panel granate.
        En mobile desactivamos hover del nav (se quedan pegados en iOS tras tap) --- */
  .site-nav{gap:12px}
  .navlinks{display:none}
  .site-nav .lang,.site-nav .nav-cta{display:none}
  .site-nav .menu-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:11.2px;text-transform:uppercase;letter-spacing:.05em;padding:0;background:none;border:0}
  .site-nav .navright{border-left:0;padding-left:0;gap:0}
  .site-nav:hover,.site-nav:has(.nav-item:hover),.site-nav:has(.mega-panel:hover){background:var(--bg)}
  .site-nav:hover .brand,.site-nav:hover .lang,.site-nav:hover .nav-cta,.site-nav:hover .menu-btn{color:var(--ink)}
  .page-about .site-nav{background:var(--maroon)}   /* mantén Nosotros como excepción */
  .page-about .site-nav .brand,.page-about .site-nav .menu-btn{color:var(--on-maroon)}

  /* --- Hero home: logo un poco más contenido --- */
  .hero-logo{font-size:clamp(3.5rem,22vw,7rem);line-height:.9}
  .hero-labels{gap:6px 20px;margin-top:12px;font-size:11px}

  /* --- Intro, blocs centrados: padding vertical menor --- */
  .intro{padding:clamp(60px,10vh,90px) var(--pad-x)}
  .intro-text{font-size:16px;line-height:24px}
  .sol-emph{padding:clamp(56px,9vh,90px) var(--pad-x);gap:24px}
  .sol-emph-p{font-size:16px;line-height:22px}

  /* --- Banda de soluciones (ticker) en home: cards más grandes ocupando pantalla --- */
  .ticker-track{gap:12px;padding:0 12px}
  .sol-card{width:78vw}
  .sol-cat-title{font-size:14px}

  /* --- Nuestro enfoque (home/nosotros) --- */
  .enfoque{min-height:520px}
  .enfoque-title{font-size:clamp(22px,7vw,32px)}
  .enfoque-arrows{bottom:24px;left:var(--pad-x)}

  /* --- Preocupaciones home (imagen + lista): 1 col, imagen arriba, lista abajo --- */
  .preoc{grid-template-columns:1fr;gap:24px;padding:56px var(--pad-x)}
  .preoc-media{aspect-ratio:4/3}
  .preoc-right{gap:28px;align-items:center}
  .preoc-list{text-align:center}
  .preoc-item a{font-size:18px;line-height:28px}

  /* --- Flotantes: sin flotantes en mobile, solo el bloque central + una foto vertical arriba del eyebrow --- */
  .flotantes{min-height:0;padding:64px var(--pad-x)}
  .flotantes .float-img{display:none}
  .flot-mob{display:block;width:100%;max-width:260px;aspect-ratio:3/4;overflow:hidden;margin:0 auto 24px}

  /* --- Sol-controls (flechas + botón "Ver todas") --- */
  .sol-controls{margin-top:36px;gap:20px}

  /* --- Grid soluciones (listado): 1 col; imagen visible por defecto, al tap muestra el listado (toggle) --- */
  .sol-cat{grid-template-columns:1fr;gap:36px;padding:32px var(--pad-x) 72px}
  .sol-cat-card{min-height:auto;grid-template-rows:auto auto;cursor:pointer}
  .sol-cat-view{aspect-ratio:4/5;position:relative;overflow:hidden}
  .sol-cat-img{position:absolute;inset:0}
  .sol-list{position:absolute;inset:0;display:flex;background:var(--bg);opacity:0;pointer-events:none;padding:20px 16px;gap:6px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sol-list a{font-size:13px;line-height:1.4}
  .sol-cat-card.open .sol-list{opacity:1;pointer-events:auto}
  .sol-cat-card.open .sol-cat-img .ph{opacity:0}
  .sol-cat-card:hover .sol-list{opacity:0;pointer-events:none}   /* desactiva el comportamiento hover en mobile */
  .sol-cat-card:hover .sol-cat-img .ph{opacity:1}
  .sol-cat-card.open:hover .sol-list{opacity:1;pointer-events:auto}
  .sol-cat-card.open:hover .sol-cat-img .ph{opacity:0}
  .sol-cat-foot{padding:14px 0 4px}

  /* --- Grid preocupaciones (listado): 2 col con caption --- */
  .cat-grid{grid-template-columns:repeat(2,1fr);column-gap:10px;row-gap:32px;padding:24px var(--pad-x) 64px}
  .cat-cap{font-size:12px;margin-top:10px}

  /* --- Página detalle (hero centrado): sin flotantes (se salen o pisan el texto) --- */
  .dt-hero{padding:80px var(--pad-x) 80px}
  .dt-hero .float-img{display:none}
  .dt-hero-inner{max-width:none}
  .dt-title{font-size:clamp(34px,10vw,44px)}
  .dt-intro{font-size:15px;line-height:1.55}

  /* --- Split del detalle (Presentación / Nosotros): 1 col, IMAGEN ARRIBA, texto abajo --- */
  .dt-split,.dt-split.right{grid-template-columns:1fr;min-height:0}
  .dt-split-media{aspect-ratio:16/11;order:0}
  .dt-split-text{align-self:auto;padding:32px var(--pad-x);order:1}
  .dt-split.right .dt-split-media{order:0}
  .dt-split.right .dt-split-text{order:1}
  .dt-p .bul{padding-left:16px;text-indent:-16px}

  /* --- Causas (heading + acordeón) en el detalle: 1 col, heading arriba --- */
  .dt-causas{grid-template-columns:1fr;gap:24px;padding:48px var(--pad-x)}
  .dt-causas .dt-h{max-width:none}

  /* --- Sección soluciones dentro del detalle (dt-sols): 1 col, sin sticky --- */
  .dt-sols{grid-template-columns:1fr;gap:32px;padding:48px var(--pad-x)}
  .dt-sols-left{position:static}
  .dt-sols-left .dt-h{font-size:22px}
  .dt-sols-p{font-size:14.5px;margin:16px 0 0}
  .sol-imgs{grid-template-columns:1fr 1fr;gap:10px}
  .sol-imgframe{aspect-ratio:311/380}
  .sol-imgcap{font-size:11.5px;line-height:1.35;margin-top:8px}
  .sol-imgcap b{margin-right:6px}

  /* --- Precauciones: heading arriba, listas abajo --- */
  .sol-prec{grid-template-columns:1fr;gap:16px;padding:48px var(--pad-x)}
  .sol-prec .dt-h{font-size:22px}

  /* --- "Otras preocupaciones" ticker: cards más compactas --- */
  .dt-related{padding:32px 0 56px}
  .dt-related .sol-card{width:70vw}

  /* --- Solución hero (split): imagen arriba, texto abajo (1 col) --- */
  .sh{grid-template-columns:1fr;min-height:0}
  .sh-media{aspect-ratio:16/11}
  .sh-text{padding:36px var(--pad-x);gap:22px}
  .sh-title{font-size:clamp(36px,10vw,52px)}
  .sh-intro{font-size:15px}

  /* --- Acordeón (causas / desarrollo): más aire --- */
  .acc-btn{font-size:15px;padding:18px 0}
  .acc-panel p{font-size:13.5px;padding:0 0 18px}

  /* --- Resultados en solución: bloque centrado, texto suelto --- */
  .sol-res{padding:56px var(--pad-x) 0}
  .sol-res-head .dt-h{font-size:24px;margin-bottom:24px}
  .sol-res-head-cols{grid-template-columns:1fr;gap:20px;text-align:left}
  .sol-res-head-cols p{padding-left:0;font-size:14.5px}
  .sol-res-band{aspect-ratio:auto;height:70vh;min-height:520px}
  .sol-res-badge{padding:14px 20px;gap:10px}
  .sol-res-badge-num,.sol-res-badge-t{font-size:12px}
  .sol-res-arrows{padding:24px 0 56px}
  .sol-prec{padding:56px var(--pad-x)}

  /* --- Nosotros: manifiestos, split y hero-casita más pequeños --- */
  .ab-hero{min-height:60vh;height:auto;padding:120px 0}
  .ab-hero-casita{width:60vw}
  .ab-manifest{padding:72px var(--pad-x);gap:28px}
  .ab-manifest-p{font-size:16px;line-height:1.55}
  .ab-manifest-label{font-size:13px}
  .ab-split,.ab-split.right{grid-template-columns:1fr;min-height:0}
  .ab-split-media{aspect-ratio:16/11}
  .ab-split-text{padding:56px var(--pad-x);gap:22px}
  .ab-split .dt-h{font-size:26px}

  /* --- Precauciones: bullets en 1 col --- */
  .sol-prec-cols{grid-template-columns:1fr}

  /* Formulario del footer sin borde entre columnas en mobile */
  .ff:nth-child(2),.ff:nth-child(4){border-left:0}
  .ff input,.ff textarea{padding-left:0;padding-right:0}

  /* --- Tarifas: 1 col (sidebar arriba, tabla debajo, sin sticky). Título más chico --- */
  .tf{grid-template-columns:1fr;padding:32px var(--pad-x) 72px}
  .tf-side{position:static;gap:32px}
  .tf-title{font-size:44px}
  .tf-nav{gap:8px}
  .tf-nav a{font-size:14px}
  .tf-row,.tf-sub,.tf-group>.name{font-size:13.5px}
  .tf-row{grid-template-columns:1fr auto;gap:14px;padding:14px 0}
  .tf-cat-title{font-size:15px}

  /* --- Footer mobile: bloque de contacto enmarcado en un rectángulo completo (4 lados).
        Debajo van wordmark + legal, sin marco. Líneas gruesas (2px) y bien conectadas. --- */
  .footer{--line-cream:rgba(244,235,223,.55);padding:24px 0 0}
  .foot-contact{grid-template-columns:1fr;border:2px solid var(--line-cream);margin:0 16px}
  .foot-illus{padding:56px 32px 24px;border-right:0;border-bottom:0;justify-content:center}
  .casita{width:min(200px,55%)}
  .foot-formwrap{padding:0 24px 32px;text-align:center}
  .foot-head{font-size:17px;margin:0 auto 24px;max-width:22ch;line-height:1.4}
  /* Form: cada input separado por hairlines internas (no bordes por celda); la caja exterior la pone .foot-contact */
  .foot-form{grid-template-columns:1fr;border-top:2px solid var(--line-cream);padding:0}
  .foot-form .ff{text-align:left;border:0;border-top:2px solid var(--line-cream);padding:0}
  .foot-form .ff:first-child{border-top:0}
  .foot-form .ff input,.foot-form .ff textarea{padding:16px 20px}
  .btn-solid{margin:24px 20px 20px auto;background:var(--bg);color:var(--maroon);border:2px solid var(--on-maroon)}
  /* Wordmark "Azahar" arriba del legal (más pequeño que en desktop, como firma) */
  .foot-info{display:block;padding:24px var(--pad-x) 0;grid-template-columns:1fr;text-align:center;border-top:1px solid var(--line-cream)}
  .foot-word{display:inline-block;font-family:var(--f-logo);font-size:clamp(3rem,15vw,4.5rem);line-height:1;color:var(--on-maroon);text-decoration:none;margin-bottom:16px}
  .foot-cols{display:none}    /* sin las columnas de navegación (van en el menú) */
  .foot-legal{padding:32px var(--pad-x) 40px;flex-direction:column;gap:14px;font-family:var(--f-text);font-size:11px;text-transform:none;letter-spacing:0;text-align:center;align-items:center;opacity:.75;border-top:0}
}
/* Breakpoint mobile pequeño: cards a ancho de pantalla en la banda de soluciones */
@media (max-width:640px){
  :root{ --card-w:78vw; }
  .float-statement{font-size:20px;line-height:27px}
}

@media (max-width:480px){
  .hero-labels{font-size:10.5px;gap:5px 14px}
  .tf-title{font-size:38px}
}

/* ============ FOTOS DE LA DEMO ============
   Cada clase img-XX aplica su foto al .ph correspondiente. Se sobrepone al
   background del placeholder marfil. Object-fit: cover en background-size. */
.ph.img-a1{background:#A8A186 url('img/A1-hero.png') center/cover no-repeat}
.ph.img-a2, .ph.img-a2-experiencia{background:#6B7358 url('img/A2-enfoque.png') center/cover no-repeat}
.ph.img-a2-resultados{background:#6B7358 url('img/A2-resultados.png') center/cover no-repeat}
.ph.img-a2-tecnologia{background:#6B7358 url('img/A2-tecnologia.png') center/cover no-repeat}
.ph.img-a4{background:#CBC5AF url('img/A4-split-presentacion.png') center/cover no-repeat}
.ph.img-a5{background:#CBC5AF url('img/A5-hero-solucion.png') center/cover no-repeat}
.ph.img-a6,.ph.img-a6-1,.ph.img-a6-2,.ph.img-a6-3,.ph.img-a6-4,.ph.img-a6-5{background:#6B7358 url('img/A6-banda-panoramica.png') center/cover no-repeat}
.ph.img-b1{background:#CBC5AF url('img/B1-inyectables.png') center/cover no-repeat}
.ph.img-b2{background:#CBC5AF url('img/B2-medicina-estetica.png') center/cover no-repeat}
.ph.img-b3{background:#CBC5AF url('img/B3-depilacion.png') center/cover no-repeat}
.ph.img-b4{background:#CBC5AF url('img/B4-laser.png') center/cover no-repeat}
.ph.img-b5{background:#CBC5AF url('img/B5-capilar.png') center/cover no-repeat}
.ph.img-b6{background:#CBC5AF url('img/B6-injerto.png') center/cover no-repeat}
.ph.img-e1{background:#CBC5AF url('img/E1-preoc-reveal.png') center/cover no-repeat}
.ph.img-f1{background:#CBC5AF url('img/F1-flotante-1.png') center/cover no-repeat}
.ph.img-f2{background:#CBC5AF url('img/F2-flotante-2.png') center/cover no-repeat}
.ph.img-f3{background:#CBC5AF url('img/F3-flotante-3.png') center/cover no-repeat}

/* Versiones mobile: reemplazan solo la imagen de fondo en ≤820px, mantienen color/posición */
@media (max-width:820px){
  .ph.img-a1{background-image:url('img/A1-hero-mobile.png')}
  .ph.img-a2,.ph.img-a2-experiencia{background-image:url('img/A2-enfoque-mobile.png')}
  .ph.img-a2-resultados{background-image:url('img/A2-resultados-mobile.png')}
  .ph.img-a2-tecnologia{background-image:url('img/A2-tecnologia-mobile.png')}
  .ph.img-a6,.ph.img-a6-1,.ph.img-a6-4{background-image:url('img/A6-banda-panoramica-mobile.png')}
  .ph.img-a6-2{background-image:url('img/A6-2-textura-mobile.png')}
  .ph.img-a6-3{background-image:url('img/A6-3-poros-mobile.png')}
  .ph.img-a6-5{background-image:url('img/A6-5-fresca-mobile.png')}
}

/* Ilustración line-art del footer (reemplaza la casita SVG). Sin animación de trazo (PNG). */
.casita-img{width:min(300px,60%);height:auto;display:block}
@media (max-width:820px){ .casita-img{width:min(200px,55%)} }