/* Wingate by Wyndham Bronx Haven Park — sitio independiente de Haven Park LLC. Mismo layout que dolce2 (mismos nombres de clase, misma reticula, mismos componentes) con la identidad de Wingate aplicada encima, tomada del Brand Guidelines de Wingate Inns International: Wingate Dark Green PANTONE 349 C RGB 0/114/63 #00723F Wingate Light Green PANTONE 368 C RGB 123/193/67 #7BC143 Gray RGB 88/89/91 #58595B Light Green 2 RGB 152/175/60 #98AF3C (secundario, overlays) Light Blue RGB 132/194/191 #84C2BF (secundario, overlays) Tipografia: el manual pide Dinot en impresos y dice expresamente que "para comunicaciones online (html) ... el uso de Arial en Regular o Bold es aceptable". Arial se usa tal cual, sin webfont: es la tipografia que el manual autoriza para HTML, no hay que descargar nada, y el sitio no tiene ni un pedido a un servidor de fuentes antes del consentimiento. Elemento de diseno "connecting line": linea blanca con un circulo en la punta, siempre a la izquierda del titulo y siempre sobre fondo oscuro. El manual es explicito en las tres cosas (blanca, al costado del titulo, nunca sin el circulo), asi que esta implementada solo dentro de .band.ink y del hero, que son los unicos fondos oscuros del sitio. */ :root{ --green:#00723F; /* Wingate Dark Green */ --green-lt:#7AC143; /* Wingate Light Green, PANTONE 368 C. El valor exacto sale del SVG oficial de la marca */ --green-2:#98AF3C; /* Light Green 2, secundario */ --blue-lt:#84C2BF; /* Light Blue, secundario */ --gray:#58595B; /* Gray de marca */ --white:#FFFFFF; /* Neutros derivados del gris de marca, no grises puros: el fondo lleva una pizca del verde para que el blanco de las tarjetas se lea como blanco y no como un parche. */ --sand:#F7F9F6; --shell:#ECF1EA; --ink:#1D2320; --ink-soft:#4C5450; --ink-faint:#6B7370; /* 4.6:1 sobre el fondo; #858D89 daba 3.4 y la pagina de accesibilidad promete contraste */ --line:#DDE4DB; --line-soft:#EAEFE8; --green-soft:#E3F1E8; --sans:Arial,Helvetica,'Helvetica Neue',sans-serif; --pad:clamp(20px,5vw,72px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} } body{ margin:0;background:var(--sand);color:var(--ink); font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.68; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit} /* El manual pide titulares en Arial, caja alta, Regular y Bold, con la palabra que lleva el enfasis en Bold. El sitio lo aplica en los titulares de seccion; el h1 del hero va en caja alta pero con un tracking mas abierto para que a 4rem siga siendo legible. */ h1,h2,h3{font-family:var(--sans);font-weight:700;text-wrap:balance} h1{font-size:clamp(2.1rem,5.4vw,3.8rem);line-height:1.06;margin:0;text-transform:uppercase;letter-spacing:.01em} h2{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.14;margin:0 0 .5em;text-transform:uppercase;letter-spacing:.005em} h3{font-size:clamp(1.08rem,1.8vw,1.35rem);line-height:1.26;margin:0 0 .35em} h1 em,h2 em{font-style:normal;font-weight:400} /* la mitad que NO lleva el enfasis */ p{margin:0 0 1.05em;max-width:64ch} .eyebrow{ font-size:.72rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--green);margin:0 0 1.1em; } .lede{font-size:clamp(1.03rem,1.5vw,1.24rem);color:var(--ink-soft);line-height:1.6;font-weight:400} /* ---------- header ---------- */ .topbar{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97); backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px); } .topbar .in{ max-width:1360px;margin:0 auto;padding:12px var(--pad); display:flex;align-items:center;gap:clamp(12px,2.4vw,36px); } /* Lockup del hotel: logo de marca arriba, designacion de la propiedad debajo. */ .brand{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;text-decoration:none} .brand img{height:42px;width:auto;display:block} .brand .prop{font-size:.63rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--green);line-height:1;white-space:nowrap} .nav{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto;align-items:center} .nav a.lnk{ text-decoration:none;font-size:.77rem;letter-spacing:.12em;text-transform:uppercase; font-weight:700;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap; } .nav a.lnk:hover,.nav a.lnk:focus-visible{color:var(--green);border-bottom-color:var(--green-lt)} .topbar .btn{flex:0 0 auto} .btn{ display:inline-block;text-decoration:none;font-family:var(--sans); font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; padding:13px 26px;border:2px solid var(--green);background:var(--green);color:#fff; border-radius:3px;transition:background .18s,color .18s,border-color .18s;white-space:nowrap;cursor:pointer; } .btn:hover,.btn:focus-visible{background:var(--green-lt);border-color:var(--green-lt);color:#10240F} .btn.ghost{background:transparent;color:var(--green);border-color:var(--green)} .btn.ghost:hover,.btn.ghost:focus-visible{background:var(--green);color:#fff} .btn.light{border-color:#fff;color:#fff;background:transparent} .btn.light:hover,.btn.light:focus-visible{background:#fff;color:var(--green)} :focus-visible{outline:3px solid var(--green-lt);outline-offset:3px} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:100;background:#fff;padding:10px 16px;border:2px solid var(--green)} /* Menu de mobile con
, sin JavaScript. El panel se ancla al header, no al . */ .menu{margin-left:auto;display:none} .menu>summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px; font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft); padding:10px 2px; } .menu>summary::-webkit-details-marker{display:none} .menu>summary .bars{display:block;width:20px;height:11px;position:relative} .menu>summary .bars::before,.menu>summary .bars::after{ content:"";position:absolute;left:0;right:0;height:2px;background:var(--green); } .menu>summary .bars::before{top:0;box-shadow:0 5px 0 var(--green)} .menu>summary .bars::after{bottom:0} .menu[open]>summary .bars::before{box-shadow:none;top:5px;transform:rotate(45deg)} .menu[open]>summary .bars::after{bottom:5px;transform:rotate(-45deg)} .menu .panel{ position:absolute;left:0;right:0;top:100%;background:var(--white); border-top:1px solid var(--line);border-bottom:3px solid var(--green-lt); box-shadow:0 16px 40px rgba(29,35,32,.14);padding:4px 0;z-index:60; } .menu .panel a{ display:block;padding:14px var(--pad);text-decoration:none;color:var(--ink-soft); font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; border-bottom:1px solid var(--line-soft); } .menu .panel a:last-child{border-bottom:0} .menu .panel a:hover,.menu .panel a:focus-visible{background:var(--shell);color:var(--green)} @media (max-width:920px){ .nav{display:none} .menu{display:block} .topbar .in{gap:12px} .topbar .btn{padding:11px 18px;font-size:.7rem;letter-spacing:.1em} } @media (max-width:400px){ .brand img{height:30px} .brand .prop{font-size:.56rem;letter-spacing:.18em} .brand{gap:5px} .topbar .btn{padding:10px 13px;letter-spacing:.06em} } /* ---------- hero ---------- */ .hero{position:relative;min-height:clamp(420px,64vh,640px);display:flex;align-items:flex-end} .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,20,10,.32) 0%,rgba(0,20,10,.06) 40%,rgba(0,30,15,.72) 100%); } .hero .in{position:relative;z-index:2;max-width:1360px;margin:0 auto;width:100%;padding:0 var(--pad) clamp(44px,7vw,84px);color:#fff} .hero h1{color:#fff;max-width:17ch} .hero .sub{color:rgba(255,255,255,.94);font-size:clamp(1rem,1.6vw,1.22rem);margin:.75em 0 1.6em;max-width:46ch} /* Sobre una foto no hay contraste garantizado con ningun color de marca, asi que el eyebrow del hero va en blanco, que es el unico que el degradado de abajo sostiene siempre. */ .hero .eyebrow{color:#fff} /* Connecting line: blanca, a la izquierda del titular, con el circulo en la punta. */ .cline{display:block;margin:0 0 20px;width:clamp(56px,9vw,104px);height:2px;background:#fff;position:relative} .cline::after{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff} /* ---------- layout ---------- */ .wrap{max-width:1360px;margin:0 auto;padding-inline:var(--pad)} .band{padding-block:clamp(56px,9vw,116px)} .band.tint{background:var(--shell)} .band.ink{background:var(--green);color:#fff} .band.ink h2,.band.ink h3{color:#fff} .band.ink p{color:rgba(255,255,255,.88)} /* El verde claro de marca sobre el verde oscuro de marca da 2.75:1, que no es legible. Para texto sobre el verde oscuro se usa una version mas clara del mismo tono (4.7:1). El verde claro sigue siendo el acento, pero en elementos graficos, no en texto chico. */ .band.ink .eyebrow{color:#CFECAE} .band.ink a{color:#fff} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center} .split.wide-text{grid-template-columns:1.05fr .95fr} @media (max-width:860px){.split,.split.wide-text{grid-template-columns:1fr}} .split figure{margin:0} .split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)} @media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}} @media (max-width:620px){.grid3{grid-template-columns:1fr}} .grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,34px)} @media (max-width:760px){.grid4{grid-template-columns:1fr}} .card{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden; display:flex;flex-direction:column} .card img{width:100%;aspect-ratio:3/2;object-fit:cover} .card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .card .meta{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--green);margin-bottom:.5em} .card p{font-size:.95rem;margin-bottom:0} .card .btn{align-self:flex-start;margin-top:auto;padding-top:11px;padding-bottom:11px} .card p+.btn{margin-top:20px} .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,4vw,48px);border-radius:3px;overflow:hidden} @media (max-width:760px){.facts{grid-template-columns:1fr 1fr}} .fact{background:var(--white);padding:26px 22px} .fact b{display:block;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;color:var(--green);font-weight:700} .fact span{display:block;margin-top:.55em;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);line-height:1.4} .checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px} @media (max-width:700px){.checks{grid-template-columns:1fr}} .checks li{position:relative;padding-left:28px;font-size:.97rem;color:var(--ink-soft)} .checks li::before{content:"";position:absolute;left:0;top:.56em;width:13px;height:2px;background:var(--green-lt)} .band.ink .checks li{color:rgba(255,255,255,.9)} .band.ink .checks li::before{background:var(--green-lt)} /* ---------- faq ---------- */ .faq{border-top:2px solid var(--green);max-width:920px} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative; font-weight:700;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.38; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:17px;font-size:1.45rem;color:var(--green-lt);font-weight:400} .faq details[open] summary::after{content:"\2013"} .faq .a{padding:0 40px 22px 0;color:var(--ink-soft);font-size:.98rem} .faq .a p:last-child{margin-bottom:0} /* ---------- footer ---------- */ footer.site{background:var(--ink);color:#C3CAC6;padding-block:clamp(48px,7vw,84px);font-size:.93rem} footer.site a{color:#C3CAC6;text-decoration:none;border-bottom:1px solid rgba(195,202,198,.3)} footer.site a:hover,footer.site a:focus-visible{color:#fff;border-bottom-color:var(--green-lt)} footer.site h3{color:#fff;font-size:.85rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1em} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)} @media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.fgrid{grid-template-columns:1fr}} .fgrid ul{list-style:none;padding:0;margin:0} .fgrid li{margin-bottom:.55em} .legal{margin-top:clamp(34px,5vw,56px);padding-top:26px;border-top:1px solid rgba(195,202,198,.22); display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:.83rem;color:#8B938F} .legal a{border-bottom:none} .legal .sep{margin-left:auto} @media (max-width:640px){.legal .sep{margin-left:0}} /* ---------- paginas legales ---------- */ .doc{max-width:760px;padding-block:clamp(44px,7vw,88px)} .doc h1{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:.35em} .doc h2{font-size:clamp(1.1rem,1.9vw,1.4rem);margin-top:2.2em;text-transform:none;letter-spacing:0} .doc h3{font-size:1.04rem;margin-top:1.6em} .doc p,.doc li{font-size:1rem;color:var(--ink-soft)} .doc ul,.doc ol{padding-left:1.15rem;margin-bottom:1.1em} .doc li{margin-bottom:.45em} .doc .updated{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2.2em} .doc table{width:100%;border-collapse:collapse;font-size:.93rem;margin:1em 0 1.6em} .doc th{text-align:left;font-size:.71rem;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-faint);font-weight:700;padding:9px 12px 9px 0;border-bottom:2px solid var(--line)} .doc td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top} .doc .tw{overflow-x:auto} .doc a{color:var(--green)} /* ---------- consentimiento de cookies ---------- */ #cc{ position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--white); border-top:3px solid var(--green);box-shadow:0 -8px 30px rgba(29,35,32,.14); padding:16px var(--pad) calc(16px + env(safe-area-inset-bottom,0px)); } #cc[hidden]{display:none!important} #cc .in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:14px 30px;align-items:center} @media (max-width:900px){#cc .in{grid-template-columns:1fr;gap:12px}} #cc h2{font-size:.95rem;margin:0 0 .3em;text-transform:uppercase;letter-spacing:.09em} #cc p{font-size:.86rem;line-height:1.5;margin:0;color:var(--ink-soft);max-width:78ch} #cc p a{color:var(--green)} #cc .acts{display:flex;gap:9px;flex-wrap:wrap} #cc .btn{padding:10px 18px;font-size:.68rem;letter-spacing:.1em;cursor:pointer} @media (max-width:900px){ #cc{padding:13px var(--pad) calc(13px + env(safe-area-inset-bottom,0px))} #cc h2{font-size:.88rem;margin-bottom:.2em} #cc p{font-size:.81rem;line-height:1.45} #cc .mas{display:none} #cc fieldset{gap:14px;margin-top:7px} #cc label{font-size:.79rem} #cc .acts{gap:7px;flex-wrap:nowrap} #cc .acts .btn{flex:1 1 0;min-width:0;text-align:center;padding:11px 6px;font-size:.64rem;letter-spacing:.04em} } #cc fieldset{border:0;padding:0;margin:9px 0 0;display:flex;gap:20px;flex-wrap:wrap} #cc label{display:flex;gap:7px;align-items:center;font-size:.85rem;color:var(--ink-soft)} #cc input[type=checkbox]{width:16px;height:16px;accent-color:var(--green);flex:0 0 auto} #cc input:disabled+span{color:var(--ink-faint)} .cc-reopen{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline} /* ---------- banda de reserva ---------- No hay date picker. El Brand Standard 100.03.08 dice, sin matices, que el hotel solo puede ofrecer reserva online "through a link to the specific designated Rooms & Rates page for that hotel within the brand website", y esa pagina existe y responde 200. Un formulario propio mandaria al huesped a un motor distinto, o le pediria fechas que despues el sitio de marca descarta porque no tenemos su especificacion de deep link. Un boton que lleva exactamente a donde el estandar dice, mas el telefono del hotel, cumple el estandar y no rompe nada. Vive en su propia seccion despues del hero, como en dolce2: adentro del hero, el overflow del contenedor le cortaba la mitad en pantallas chicas. */ .booksec{position:relative;z-index:10;margin-top:clamp(-72px,-6vw,-48px)} @media (max-width:880px){.booksec{margin-top:0;background:var(--shell);padding-block:22px}} .bookbar{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--green-lt); border-radius:3px;padding:clamp(18px,2.2vw,28px);box-shadow:0 18px 50px rgba(29,35,32,.14)} @media (max-width:880px){.bookbar{box-shadow:none}} .bookbar form{display:grid;grid-template-columns:1.15fr 1.15fr .8fr .8fr auto;gap:14px 16px;align-items:end} @media (max-width:1040px){.bookbar form{grid-template-columns:1fr 1fr 1fr 1fr}} @media (max-width:640px){.bookbar form{grid-template-columns:1fr 1fr}} .bookbar .f{display:flex;flex-direction:column;gap:7px;min-width:0} .bookbar label{font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint)} .bookbar input,.bookbar select{ font-family:var(--sans);font-size:.97rem;color:var(--ink);line-height:1.2; height:50px;padding:0 13px;width:100%;min-width:0; border:1px solid var(--line);border-radius:3px;background:var(--white); transition:border-color .15s,box-shadow .15s; } .bookbar input:hover,.bookbar select:hover{border-color:var(--ink-faint)} .bookbar input:focus,.bookbar select:focus{ outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft); } /* La flecha del select, en el verde de marca. */ .bookbar select{ -webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2300723F' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center; } /* Los date nativos traen su propio icono y abren el picker del sistema, que en telefono es muchisimo mejor que cualquier calendario que escribamos. */ .bookbar input[type=date]{cursor:pointer} .bookbar input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;margin-left:6px} .bookbar input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.85} .bookbar .go{display:flex;align-items:flex-end} @media (max-width:1040px){.bookbar .go{grid-column:1/-1}} .bookbar .go .btn{ width:100%;height:50px;padding:0 30px;cursor:pointer;font-family:var(--sans); display:inline-flex;align-items:center;justify-content:center;border-radius:3px; } .bookbar .adv{grid-column:1/-1;margin:2px 0 0} .bookbar .adv summary{cursor:pointer;font-size:.82rem;color:var(--ink-faint);list-style:none; display:inline-flex;align-items:center;gap:7px;padding:4px 0} .bookbar .adv summary::-webkit-details-marker{display:none} .bookbar .adv summary::before{content:"+";color:var(--green);font-size:1.05rem;line-height:1;font-weight:700} .bookbar .adv[open] summary::before{content:"\2013"} .bookbar .adv summary:hover{color:var(--ink)} .bookbar .adv .row{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;align-items:flex-end} .bookbar .adv .f{max-width:260px;flex:1 1 180px} /* La casilla de habitacion accesible va en el buscador, no escondida en una pagina aparte: manda el parametro &Accessible=true de la ficha de Wyndham y hace que el huesped que la necesita llegue al motor con el filtro puesto. */ /* Hereda de .bookbar label, que es una etiqueta de campo en caja alta. Esto es una frase, no una etiqueta, asi que hay que devolverle caja normal y peso normal o sale gritando. */ .bookbar .acc{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;font-weight:400; letter-spacing:0;text-transform:none;color:var(--ink-soft);line-height:1.45; flex:1 1 100%;max-width:none;cursor:pointer;padding:2px 0} .bookbar .acc input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);flex:0 0 auto; padding:0;border-radius:2px;margin:1px 0 0} .bookbar .foot{grid-column:1/-1;max-width:none;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft); font-size:.84rem;color:var(--ink-faint);display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center} .bookbar .foot a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(0,114,63,.3)} .bookbar .foot a:hover{border-bottom-color:var(--green)} .bookbar .foot .sep{margin-left:auto} @media (max-width:640px){.bookbar .foot .sep{margin-left:0}} /* ---------- exigencias del brand standard ---------- */ .brand-link{margin:clamp(30px,4.5vw,50px) 0 0;padding-top:24px;border-top:1px solid rgba(195,202,198,.22); font-size:.95rem;color:#C3CAC6} .brand-link a{color:#fff;border-bottom-color:var(--green-lt);font-weight:700} /* El dominio propio va en cuerpo mas chico que el del sitio de marca y despues de el: el 100.03.08 pide posicion secundaria y tipografia menor para la direccion del sitio propio. */ .brand-link .own{display:block;margin-top:.5em;font-size:.8rem;color:#8B938F} .brand-link .own a{color:#A9B1AD;font-weight:400;border-bottom-color:rgba(169,177,173,.3)} footer.site .legal{margin-top:14px;padding-top:14px;border-top:0} .owner-operator{color:#A1A9A5} /* Linea de copyright de marca: obligatoria segun el Brand Guidelines en toda pieza donde aparezcan el logo de la marca y el de la propiedad, legible y no menor a 6pt. */ .brand-copy{width:100%;margin:10px 0 0;font-size:.76rem;color:#949C98;line-height:1.5} /* ---------- mapa detras del consentimiento ---------- */ /* Altura fija en vez de aspect-ratio: con un max-height por encima, el aspect-ratio encoge el ANCHO para mantener la proporcion, y el mapa quedaba a media caja. */ .mapbox{position:relative;height:clamp(300px,40vw,460px);background:var(--white); border:1px solid var(--line);border-radius:3px;overflow:hidden; display:flex;align-items:center;justify-content:center} .mapbox iframe{width:100%;height:100%;border:0;display:block} .mapbox[data-loaded] .mapoff{display:none} .mapoff{margin:0;padding:clamp(20px,4vw,40px);text-align:center;max-width:46ch; font-size:.92rem;color:var(--ink-soft)} .mapoff .cc-reopen{color:var(--green);font-weight:700} @media (max-width:600px){.mapbox{height:320px}} /* ---------- control de cookies en /cookies ---------- */ .ccstate{font-weight:700;font-size:.95rem;padding:11px 15px;border-radius:3px; border-left:4px solid var(--ink-faint);background:var(--shell);color:var(--ink)} .ccstate.on{border-left-color:var(--green-lt)} .ccstate.off{border-left-color:var(--gray)} .ccform{margin:20px 0 0;border:1px solid var(--line);border-radius:3px;padding:clamp(18px,2.4vw,26px)} .ccrow{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:.96rem; color:var(--ink-soft);line-height:1.5;cursor:pointer} .ccrow:has(input:disabled){cursor:default} .ccrow input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);flex:0 0 auto;margin:2px 0 0} .ccrow b{color:var(--ink)} .ccact{margin:4px 0 0} .ccact .btn{cursor:pointer} .ccsaved{margin:14px 0 0;font-size:.92rem;color:var(--green);font-weight:700} .ccsaved[hidden]{display:none} .ccnote{font-size:.88rem;color:var(--ink-faint);margin-top:16px} /* ---------- selector de idioma (EN/ES) ---------- * Un link simple en el header, al lado del boton de reservar. Vive fuera del