/* Suma Utjawi · estilos compartidos */ :root{ --ink:#2b2420; --ink-2:#4a3728; --teal:#3d4a73; --teal-soft:#e4e7ef; --teal-line:#c4cbdc; --bg:#f7f1e6; --sand:#efe3cd; --card:#fff; --text:#2b2420; --muted:#7a6f62; --line:#e3d4b8; --ok:#46562c; --ok-bg:#eef1e5; --warn:#a8670f; --warn-bg:#fbf0dc; --err:#b83a2e; --err-bg:#fbe7e4; --serif:'Bodoni Moda',Georgia,'Times New Roman',serif; --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --shadow:0 6px 22px rgba(43,36,32,.10); --shadow-lg:0 18px 50px rgba(43,36,32,.22); --header-h:72px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} body.no-scroll{overflow:hidden} img{max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.15;margin:0} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* Checkout como página completa y separada (hotel.html): más angosto que el .wrap normal de las páginas de catálogo, para que se lea como un formulario limpio en cualquier tamaño de pantalla (celular, tablet, laptop, PC) en vez de estirarse a todo el ancho. */ .ckout-wrap{max-width:640px} .ic{flex:none;vertical-align:middle} .star-on{fill:currentColor} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ---------- Cabecera ---------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);height:var(--header-h)} .nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand-mark{width:44px;height:44px;display:grid;place-items:center;flex:none} /* Ola del logo en celeste claro (antes se cambiaba solo en móvil; ahora igual en PC/laptop/tablet). Solo color, el resto del logo queda igual. */ .site-header .brand-mark .logo path{stroke:#5ec8e8} .logo-mark{display:block} .brand-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink-2);letter-spacing:.05em;text-transform:none;white-space:nowrap} .brand-name em{font-style:normal;color:var(--teal)} .nav-links{display:flex;gap:36px} .nav-links a{text-decoration:none;font-weight:500;font-size:15px;color:#4a3728;padding:6px 0} .nav-links a:hover{color:var(--ink)} .nav-links a.active{font-weight:700;color:var(--ink)} .nav-actions{display:flex;align-items:center;gap:14px} .lang{display:inline-flex;background:#f3ead9;border-radius:999px;padding:0} .lang button{border:0;background:transparent;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;cursor:pointer;color:var(--ink)} .lang button.on{background:var(--ink-2);color:#fff} .link-btn{background:none;border:0;cursor:pointer;font-weight:500;color:var(--ink);padding:6px} .link-btn:hover{color:var(--teal)} /* ---------- Botones ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .05s} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--ink-2);color:#fff} .btn-primary:hover{background:var(--ink)} .btn-primary[disabled]{background:#cfc2a8;cursor:not-allowed} .btn-outline{background:transparent;border-color:var(--ink-2);color:var(--ink-2)} .btn-outline:hover{background:var(--teal-soft)} .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--teal)} .btn-danger{background:var(--err);color:#fff} .btn-block{display:flex;width:100%} .btn-sm{padding:8px 16px;font-size:14px} .icon-btn{border:0;background:transparent;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink)} .icon-btn:hover{background:#f3ead9} /* ---------- Campos ---------- */ .field{display:flex;flex-direction:column;gap:6px;min-width:0} .field>span{font-size:11.5px;color:#8a7a5f;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .field input,.field select,.field textarea{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:12px 14px;width:100%;min-height:46px} .field textarea{min-height:96px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);border-color:var(--teal)} .field.err input,.field.err select,.field.err textarea{border-color:var(--err)} .field .msg{color:var(--err);font-size:12.5px;min-height:0} .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)} .check input{margin-top:4px;width:18px;height:18px;accent-color:var(--ink-2);flex:none} .check a,.check button.linkish{color:var(--ink-2);font-weight:600} .linkish{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;color:var(--ink-2);font-weight:600} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-grid .full{grid-column:1/-1} /* ---------- Calendario de disponibilidad (fechas ya ocupadas, propias o de OTAs sincronizadas por iCal, se muestran tachadas y no se pueden elegir) ---------- */ .cal{border:1.5px solid var(--line);border-radius:14px;padding:14px 16px 16px;background:#fff} .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .cal-nav b{font-size:14.5px;color:var(--ink);text-transform:capitalize} .cal-nav button{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--ink);display:grid;place-items:center} .cal-nav button:disabled{opacity:.35;cursor:default} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .cal-dow{font-size:10.5px;font-weight:700;text-align:center;color:#8a7a5f;text-transform:uppercase;padding-bottom:4px} .cal-day{position:relative;text-align:center;font-size:13px;padding:7px 0;border-radius:8px;cursor:pointer;color:var(--ink);background:transparent;border:1px solid transparent} .cal-day:hover:not(.is-off){background:var(--teal-soft)} .cal-day.is-blank{visibility:hidden;cursor:default} .cal-day.is-past,.cal-day.is-blocked{color:#b9ab97;cursor:not-allowed} .cal-day.is-blocked{text-decoration:line-through} .cal-day.is-off{cursor:not-allowed} .cal-day.is-in{background:var(--teal);color:#fff;font-weight:700} .cal-day.is-range{background:var(--teal-soft)} .cal-day.is-loading{opacity:.5} .cal-hint{margin:10px 0 0;font-size:12.5px;color:var(--muted)} .cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)} .cal-legend span{display:inline-flex;align-items:center;gap:6px} .cal-legend i{width:12px;height:12px;border-radius:4px;display:inline-block} .cal-legend .lg-blocked{background:#f1ece1;text-decoration:line-through;text-align:center;font-size:9px;line-height:12px} .cal-legend .lg-sel{background:var(--teal)} /* ---------- Placeholders de foto ---------- */ .ph{position:relative;overflow:hidden;background: linear-gradient(180deg,hsl(var(--h,32) 62% 84%) 0%,hsl(calc(var(--h,32) + 14) 55% 70%) 46%,hsl(var(--h2,42) 46% 42%) 47%,hsl(var(--h2,42) 52% 28%) 100%)} .ph::before{content:"";position:absolute;inset:auto 0 30% 0;height:3px;background:rgba(255,255,255,.55)} .ph-ico{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);color:rgba(255,255,255,.75)} .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ph-tag{position:absolute;left:10px;bottom:8px;font-size:11px;color:rgba(255,255,255,.92);background:rgba(0,0,0,.28);padding:2px 8px;border-radius:999px} .ph-img + .ph-tag{display:none} /* ---------- Tarjetas de hotel ---------- */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* Al filtrar (hoteles.html), la lista se vuelve a dibujar de golpe; esta animación hace que las tarjetas entren con un fundido suave en vez de aparecer de un salto. prefers-reduced-motion ya la desactiva por la regla global de arriba del archivo. */ @keyframes gridFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .grid.grid-anim .hcard{animation:gridFadeIn .28s ease both} .grid.grid-anim .hcard:nth-child(2){animation-delay:.02s} .grid.grid-anim .hcard:nth-child(3){animation-delay:.04s} .grid.grid-anim .hcard:nth-child(4){animation-delay:.06s} .grid.grid-anim .hcard:nth-child(5){animation-delay:.08s} .grid.grid-anim .hcard:nth-child(n+6){animation-delay:.1s} .hcard{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s} .hcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .hcard-ph{position:relative} .hcard .ph{aspect-ratio:16/10} .hcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;flex:1} .hcard h3{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--ink);line-height:1.25} .hcard .sub{font-size:13px;color:var(--muted)} .hcard .loc{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px} .hcard .price{margin-top:auto;padding-top:10px;font-size:15px} .hcard .price b{font-weight:700} .hcard .price small{color:var(--muted)} .tax-badge{margin-top:6px;align-self:flex-start} .badges{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2} .badge{background:#fff;color:var(--ink);font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;display:inline-flex;align-items:center;gap:5px} .badge.promo{background:var(--ink-2);color:#fff} .rate{display:inline-flex;align-items:center;gap:4px;color:#c98a0a;font-weight:700;font-size:14px} .rate small{color:var(--muted);font-weight:500} /* ---------- Listado ---------- */ .page-hero{background:var(--sand);padding:44px 0 36px} .page-hero h1{font-size:clamp(30px,4vw,44px)} .page-hero .lead{color:var(--muted);margin:8px 0 26px;max-width:60ch} .list-layout{display:grid;grid-template-columns:270px 1fr;gap:28px;padding-top:34px;padding-bottom:70px;align-items:start} .lrow-list{display:flex;flex-direction:column;gap:18px} .lrow{display:grid;grid-template-columns:220px 1fr;gap:20px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;transition:transform .15s,box-shadow .15s} .lrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .lrow-ph{position:relative;height:170px} .lrow-ph .ph{position:absolute;inset:0} /* Tarjeta de "tu viaje" del paso 3 del checkout (resumen antes de pagar, estilo Airbnb): foto + nombre + fechas/huéspedes en una fila compacta, con un botón para volver a cambiar la estadía. */ .trip-card{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:12px;box-shadow:var(--shadow);margin-bottom:14px} .trip-ph{position:relative;width:76px;height:76px;flex:0 0 auto;border-radius:10px;overflow:hidden} .trip-ph .ph{position:absolute;inset:0} .trip-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .trip-info strong{font-size:15.5px;font-family:var(--sans);line-height:1.25} .trip-info span{font-size:13px;color:var(--muted)} .trip-card .btn{flex:0 0 auto} /* Modo edición de la tarjeta "tu viaje" (calendario + huéspedes ahí mismo, sin ir al paso 1): pasa de fila compacta a bloque, para que el calendario tenga todo el ancho disponible. */ .trip-card-edit{display:block;padding:16px} .lrow-body{padding:16px 18px 16px 0;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0} .lrow-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .lrow-top h3{font-size:19px;font-style:italic;font-weight:500} .lrow-body .sub{font-size:13px;color:var(--muted)} .lrow-body .loc{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px} .lrow-body .price{font-weight:700;font-size:16px;margin-top:auto} .lrow-body .price small{font-weight:400;font-size:12.5px;color:var(--muted)} .filters{position:sticky;top:calc(var(--header-h) + 18px);align-self:start;background:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:22px} .filters h4{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)} .filters .check{margin-bottom:8px} .range-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:6px} .range-row b{color:var(--ink)} input[type=range]{width:100%;accent-color:var(--ink-2)} .chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--text)} .chip.on{background:var(--ink-2);border-color:var(--ink-2);color:#fff} .chip.static{cursor:default;background:var(--teal-soft);border-color:transparent;color:var(--ink)} .list-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap} .list-head .count{font-weight:600;color:var(--ink)} .list-head .note{font-size:13px;color:var(--muted)} .list-head select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px} .empty{background:#fff;border-radius:16px;padding:40px;text-align:center;box-shadow:var(--shadow)} .empty h3{font-family:var(--sans);font-size:18px;margin-bottom:6px} .empty p{color:var(--muted);margin:0 0 16px} /* ---------- Ficha del hotel ---------- */ .crumbs{font-size:14px;color:var(--muted);padding:20px 0 12px;display:flex;gap:8px;flex-wrap:wrap} .crumbs a{text-decoration:none;color:var(--muted)} .crumbs a:hover{color:var(--ink);text-decoration:underline} .hotel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px} .hotel-id{display:flex;gap:16px;align-items:center} .hotel-logo{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:26px;font-weight:600;background:hsl(var(--h) 45% 32%);flex:none} .hotel-logo-img{object-fit:cover;background:#eef1f3} .hotel-head h1{font-size:clamp(28px,3.6vw,40px)} .hotel-head .sub{color:var(--muted);margin-top:2px} .meta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:14px;color:var(--muted)} .meta-row span{display:inline-flex;align-items:center;gap:6px} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:10px;border-radius:18px;overflow:hidden} .gtile{position:relative;padding:0;border:0;background:none;display:block;cursor:zoom-in;min-height:0;overflow:hidden} .gtile:first-child{grid-row:1/3} .gtile .ph{position:absolute;inset:0} .gtile:hover .ph-img{transform:scale(1.03)} .ph-img{transition:transform .3s} .gmore{position:absolute;right:12px;bottom:12px;z-index:3;background:#fff;color:var(--ink);font-weight:600;font-size:13px;border-radius:999px;padding:6px 12px;display:inline-flex;gap:6px;align-items:center} .gmore-m{display:none} /* .gallery asume 5 fotos fijas (grande + 4 chicas en 2x2). Con menos fotos (p. ej. una unidad sin photos_count que arranca con 4 por defecto, ver assets/api.js) sobraban celdas del grid y quedaban huecos en blanco. Estas reglas por cantidad (clase "g-N" puesta por assets/media.js) evitan el hueco. */ .gallery.g-1{grid-template-columns:1fr} .gallery.g-2,.gallery.g-3{grid-template-columns:2fr 1fr} .gallery.g-2 .gtile:nth-child(2){grid-row:1/3} .gallery.g-3 .gtile:nth-child(2){grid-row:1} .gallery.g-3 .gtile:nth-child(3){grid-row:2} .gallery.g-4 .gtile:nth-child(4){grid-column:2/-1} .tabs{position:sticky;top:var(--header-h);z-index:40;background:rgba(248,246,242,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-top:26px} .tabs nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none} .tabs a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:15px;color:var(--muted);padding:14px 14px;border-bottom:3px solid transparent} .tabs a:hover{color:var(--ink)} .tabs a.on{color:var(--ink);border-color:var(--teal)} .hotel-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;padding-top:34px;padding-bottom:80px} .hotel-main section{margin-bottom:46px;scroll-margin-top:calc(var(--header-h) + 70px)} .hotel-main h2{font-size:28px;margin-bottom:14px} .hotel-main p{max-width:68ch} .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} .fact{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)} .fact small{display:block;color:var(--muted);font-size:12.5px} .fact b{color:var(--ink)} .callout{display:flex;gap:14px;align-items:flex-start;background:var(--teal-soft);border-radius:14px;padding:16px 18px;margin-top:16px;color:var(--ink)} .callout.warn{background:var(--warn-bg);color:var(--warn)} .callout.ok{background:var(--ok-bg);color:var(--ok)} .callout.err{background:var(--err-bg);color:var(--err)} .callout p{margin:0;font-size:14.5px} .callout strong{display:block;font-size:15px;margin-bottom:2px} .unit{display:grid;grid-template-columns:230px 1fr;background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px} .unit .ph{min-height:190px} .unit-body{padding:18px 20px;display:flex;flex-direction:column;gap:8px} .unit-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .unit-top h3{font-family:var(--sans);font-size:19px;font-weight:600} .avail{font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--ok-bg);color:var(--ok);white-space:nowrap} .avail.low{background:var(--warn-bg);color:var(--warn)} .avail.none{background:var(--err-bg);color:var(--err)} .unit-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)} .unit-meta span{display:inline-flex;gap:6px;align-items:center} .unit-foot{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-top:auto;padding-top:6px;flex-wrap:wrap} .unit-price{font-size:22px;font-weight:700;color:var(--ink)} .unit-price small{font-size:14px;font-weight:400;color:var(--muted)} .unit-total{font-size:13.5px;color:var(--muted);font-weight:400;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .promo-tag{background:var(--ink-2);color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 8px} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .svc{display:flex;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow);font-size:14.5px} .svc .ic{color:var(--teal)} .map-frame{border:0;width:100%;height:340px;border-radius:16px;background:#efe6d6} .map-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap;color:var(--muted);font-size:14.5px} .rev-top{display:grid;grid-template-columns:210px 1fr;gap:26px;background:#fff;border-radius:16px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px} .rev-score{text-align:center} .rev-score .big{font-family:var(--serif);font-size:54px;color:var(--ink);line-height:1} .rev-bars{display:flex;flex-direction:column;gap:9px;justify-content:center} .bar-row{display:grid;grid-template-columns:120px 1fr 32px;gap:10px;align-items:center;font-size:14px} .bar{height:8px;background:#efe6d6;border-radius:99px;overflow:hidden} .bar i{display:block;height:100%;background:var(--teal);border-radius:99px} .review{background:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px} .review-h{display:flex;gap:12px;align-items:center;margin-bottom:8px} .avatar{width:40px;height:40px;border-radius:50%;background:var(--teal-soft);color:var(--ink);display:grid;place-items:center;font-weight:700} .review-h small{color:var(--muted);display:block} .verified{margin-left:auto;font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:3px 10px;display:inline-flex;gap:5px;align-items:center} .reply{margin-top:10px;background:var(--bg);border-left:3px solid var(--teal);border-radius:8px;padding:10px 14px;font-size:14px} .reply b{display:block;font-size:13px;color:var(--ink)} .stars{display:inline-flex;color:#c98a0a} .stars .off{color:#e6dcc8} .pol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pol{background:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow);text-align:left;border:0;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .15s} .pol:hover{transform:translateY(-2px)} .pol .ic{color:var(--teal)} .pol b{font-size:16px;color:var(--ink)} .pol span{font-size:13.5px;color:var(--muted)} .booking{position:sticky;top:calc(var(--header-h) + 74px);align-self:start;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:22px;display:flex;flex-direction:column;gap:14px} .bk-price{font-size:15px;color:var(--muted)} .bk-price b{font-size:26px;color:var(--ink);font-family:var(--serif)} .bk-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px} .bk-fields .full{grid-column:1/-1} .bk-sum{background:var(--bg);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--muted)} .bk-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--muted)} .bk-notes li{display:flex;gap:8px;align-items:flex-start} .bk-notes .ic{color:var(--ok);margin-top:2px} .mobile-cta{display:none} /* ---------- Sellos de confianza (hotel-head, booking, hoteles.html) ---------- */ .direct-pill{display:inline-flex;align-items:center;gap:6px;background:#f3ead9;color:#6b5d3d;border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600;margin-bottom:12px} .direct-pill .ic{width:14px;height:14px} .trust-row{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px} .trust-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;line-height:1.1} .trust-chip .ic{width:15px;height:15px;flex:none} .trust-chip.pay{background:#eef1f7;color:#3d4a73} .trust-chip.instant{background:var(--ok-bg);color:var(--ok)} .trust-chip.cancel-ok{background:var(--ok-bg);color:var(--ok)} .trust-chip.cancel-warn{background:var(--warn-bg);color:var(--warn)} .trust-note{font-size:12px;color:var(--muted);margin:-2px 0 0} .poi-row{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted);margin-top:6px} .poi-row span{display:inline-flex;align-items:center;gap:5px} /* ---------- Skeleton loaders ---------- */ @keyframes skShimmer{0%{background-position:-120px 0}100%{background-position:120px 0}} .sk{background:linear-gradient(90deg,#eee3cd 0%,#f6efe1 40%,#eee3cd 80%);background-size:240px 100%;animation:skShimmer 1.15s ease-in-out infinite;border-radius:10px} .sk-unit{display:flex;gap:16px;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:14px} .sk-unit .sk-thumb{width:160px;height:120px;flex:none;border-radius:12px} .sk-unit .sk-lines{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center} .sk-unit .sk-line{height:12px} .sk-unit .sk-line.w60{width:60%} .sk-unit .sk-line.w40{width:40%} .sk-unit .sk-line.w80{width:80%} .sk-form{display:flex;flex-direction:column;gap:12px} .sk-form .sk-line{height:14px;border-radius:8px} /* ---------- Modales ---------- */ .modal-ov{position:fixed;inset:0;background:rgba(15,32,44,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px} .modal{background:#fff;border-radius:20px;width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:pop .18s ease-out} .modal.wide{max-width:720px} @keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}} .modal-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)} .modal-h h3{font-size:22px} .modal-b{padding:20px;overflow:auto} .modal-f{display:flex;justify-content:space-between;gap:10px;margin-top:18px;flex-wrap:wrap} .doc h4{font-family:var(--sans);margin:18px 0 4px;color:var(--ink);font-size:15.5px} .doc p{margin:0;color:var(--text);font-size:14.5px} .steps{display:flex;gap:6px;margin-bottom:18px} .steps div{flex:1;font-size:12px;color:var(--muted);border-top:4px solid var(--line);padding-top:6px;font-weight:600} .steps div.on{border-color:var(--teal);color:var(--ink)} .steps div.done{border-color:var(--ink-2);color:var(--ink)} .sum-table{width:100%;border-collapse:collapse;font-size:14.5px} .sum-table td{padding:7px 0;border-bottom:1px dashed var(--line)} .sum-table td:last-child{text-align:right;font-weight:600} .sum-table tr.total td{border:0;font-size:17px;color:var(--ink);padding-top:12px} .sum-table .disc td:last-child{color:var(--ok)} .gw{border:1px solid var(--line);border-radius:16px;overflow:hidden;text-align:center} .gw-h{background:var(--ink);color:#fff;padding:14px;font-weight:700;letter-spacing:.3px} .gw-b{padding:24px;display:flex;flex-direction:column;gap:12px;align-items:center} .gw-amount{font-family:var(--serif);font-size:34px;color:var(--ink)} .voucher{border:2px dashed var(--teal-line);border-radius:16px;padding:18px;background:var(--bg)} .voucher h4{font-family:var(--sans);font-size:14px;color:var(--muted);margin:0 0 2px;font-weight:500} .voucher .code{font-family:var(--serif);font-size:28px;color:var(--ink)} .auto{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px} .auto li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);opacity:.5;transition:opacity .3s,border-color .3s} .auto li .ic{color:var(--muted)} .auto li.done{opacity:1;border-color:var(--ok)} .auto li.done .ic{color:var(--ok)} .auto small{display:block;color:var(--muted)} .auto b{font-size:14.5px} /* ---------- Pie ---------- */ .site-footer{background:var(--ink);color:#eee3cf;padding:56px 0 0;margin-top:0} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px} .site-footer h4{font-family:var(--sans);color:#fff;font-size:16px;margin:0 0 14px} .site-footer a,.site-footer button.fl{display:block;color:#eee3cf;text-decoration:none;background:none;border:0;padding:0;margin-bottom:10px;cursor:pointer;text-align:left;font-size:15px} .site-footer a:hover,.site-footer button.fl:hover{text-decoration:underline} .foot-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px} .foot-brand .brand-name{color:#f7f1e6;font-style:italic} .foot-brand .brand-name em{color:#c9a35e} .site-footer p{margin:0;color:#e4d6bb;font-size:15px} .foot-social{display:flex;gap:10px;margin-top:16px} .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(238,227,207,.3);color:#eee3cf;margin:0} .foot-social a:hover{background:rgba(238,227,207,.12);text-decoration:none} .foot-line{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:15px} .foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px;color:#e4d6bb} .foot-bottom a{color:#e4d6bb;text-decoration:underline} .foot-bottom a:hover{color:#fff} /* ---------- Responsive ---------- */ @media (max-width:1020px){ .grid{grid-template-columns:repeat(2,1fr)} .list-layout{grid-template-columns:1fr} .filters{position:static} .hotel-layout{grid-template-columns:1fr} .booking{position:static;order:-1} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:720px){ /* Solo los lados: si se usa el atajo "padding:0 16px" aquí, pisa el padding-top/bottom que .list-layout y .hotel-layout necesitan (misma especificidad, esta regla va después en el archivo) y las tarjetas terminan pegadas al pie de página en celular. */ .wrap{padding-left:16px;padding-right:16px} .nav-links{display:none} .brand-name{font-size:16px;letter-spacing:.06em} .grid{grid-template-columns:1fr} .lrow{grid-template-columns:1fr} .lrow-ph{height:190px} .lrow-body{padding:14px 16px 16px} /* En celular solo se ven 3 fotos (1 grande + 2 chicas): antes el grid reservaba una 3ra fila de 120px que ninguna foto ocupaba (ese espacio en blanco debajo de las 2 fotos chicas que se veía), y el aviso "Ver las N fotos" vivía solo en la 5ta foto (oculta en celular), así que en celular no había ninguna pista de que hubiera más fotos. Ahora: sin fila de más, y el aviso se mueve a la 3ra foto (la última visible) cuando hay más de 3. */ .gallery{grid-template-columns:1fr 1fr;grid-template-rows:220px 120px} .gtile:first-child{grid-column:1/-1;grid-row:1} .gtile:nth-child(n+4){display:none} .gmore-m{display:inline-flex} .gallery.g-1 .gtile:first-child,.gallery.g-2 .gtile:first-child{grid-column:1/-1;grid-row:1} .gallery.g-2 .gtile:nth-child(2){grid-column:1/-1;grid-row:2} .unit{grid-template-columns:1fr} .unit .ph{min-height:170px} .facts,.svc-grid,.pol-grid{grid-template-columns:1fr} .rev-top{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--line);padding:12px 16px;justify-content:space-between;align-items:center;gap:12px} .modal-ov{padding:0;align-items:flex-end} .modal{max-height:92vh;border-radius:20px 20px 0 0} .btn.book-top span.t{display:none} .nav{gap:8px} .brand{gap:7px} .nav-actions{gap:6px} .site-header .nav-actions>.btn.btn-primary{padding:9px 12px;font-size:12.5px;gap:4px} .site-header .nav-actions>.btn.btn-primary svg{width:14px;height:14px} } @media (max-width:360px){ .brand-name{font-size:14px} } @media print{.site-header,.site-footer,.modal-h button{display:none}} /* ---------- Portada ---------- */ .hero{position:relative;min-height:640px;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center; background: linear-gradient(180deg,rgba(43,36,32,.30),rgba(43,36,32,.18) 45%,rgba(43,36,32,.30)), url("img/hero.jpg") center/cover no-repeat, linear-gradient(180deg,#a89880 0%,#c8b5a2 26%,#a89880 46%,#3d4a73 70%,#a89880 100%)} .hero-inner{padding:70px 24px 110px;max-width:900px} .hero .eyebrow{letter-spacing:.2em;font-size:14px;font-weight:500;color:rgba(255,255,255,.92);margin:0 0 20px} .hero h1{color:#fff;font-size:clamp(38px,6vw,68px);font-weight:500;text-shadow:0 2px 18px rgba(0,0,0,.25)} .hero p.sub{font-size:19px;max-width:620px;margin:22px auto 30px;color:rgba(255,255,255,.95);text-shadow:0 1px 8px rgba(0,0,0,.25)} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .btn-white{background:#fff;color:var(--ink);padding:15px 26px;font-size:16px} .btn-white:hover{background:var(--teal-soft)} .btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.65);color:#fff;padding:15px 26px;font-size:16px} .btn-glass:hover{background:rgba(255,255,255,.2)} .hero-search{position:relative;margin:-44px auto 0;width:min(880px,calc(100% - 32px));z-index:5;text-align:left} .after-hero{padding-top:70px;padding-bottom:96px} .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px} .sec-head h2{font-size:clamp(28px,3.4vw,38px)} .sec-head a{color:var(--ink);font-weight:500;text-decoration:none} .sec-head a:hover{text-decoration:underline} .how{background:var(--ink);color:#eee3cf;padding:80px 0;text-align:center;margin-top:80px} .how h2{color:#fff;font-size:clamp(30px,4vw,44px)} .how .lead{color:#d9b76a;margin:10px 0 48px} .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:center} .how-ico{width:56px;height:56px;border-radius:14px;background:var(--ink-2);display:grid;place-items:center;margin:0 auto 18px;color:#fff} .how h3{font-family:var(--sans);font-size:19px;font-weight:600;color:#fff;margin-bottom:8px} .how p{margin:0;color:#e3c98f;font-size:15.5px;max-width:34ch;margin-inline:auto} .why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:80px 0} .why h2{font-size:clamp(30px,4vw,44px);margin-bottom:26px} .why-list{display:flex;flex-direction:column;gap:22px} .why-item{display:flex;gap:16px;align-items:flex-start} .why-item .ico{width:42px;height:42px;border-radius:50%;background:var(--teal-soft);color:var(--ink);display:grid;place-items:center;flex:none} .why-item b{display:block;font-size:18px;color:var(--ink);font-weight:600} .why-item span{color:#6b5d4a;font-size:15.5px} .why-img{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3} .why-img img{width:100%;height:100%;object-fit:cover;display:block} .why-badge{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:14px;padding:12px 18px;box-shadow:var(--shadow)} .why-badge b{display:block;color:var(--ink)} .why-badge small{color:var(--muted)} .cta{background:#efe3cd;text-align:center;padding:76px 0} .cta h2{font-size:clamp(30px,4vw,44px)} .cta p{color:#6b5d4a;max-width:46ch;margin:14px auto 28px;font-size:18px} .cta .btn{padding:16px 30px;font-size:17px} /* ---------- Video de la zona (página Hoteles) ---------- */ .area-hero{background:var(--sand);padding:44px 0 30px} .area-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center} .area-grid h1{font-size:clamp(30px,4vw,46px)} .area-grid .lead{color:var(--muted);margin:12px 0 18px;max-width:46ch} .area-note{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:center} .vfig{margin:0} .vfig figcaption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);padding:8px 2px 0} .vfig figcaption a{color:var(--ink-2);font-weight:600;text-decoration:none;display:inline-flex;gap:5px;align-items:center} .vfig figcaption a:hover{text-decoration:underline} .vid{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#2b2420;width:100%;display:block;box-shadow:var(--shadow)} .vid img{width:100%;height:100%;object-fit:cover;display:block} .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)} .vid .play .ic{fill:currentColor;margin-left:4px} .vid[data-yt]{cursor:pointer} .vid-ph{background:linear-gradient(180deg,hsl(var(--h,32) 50% 40%),hsl(calc(var(--h,32) + 15) 45% 26%));display:grid;place-items:center;color:#fff} .vid-ph .ph-ico{top:42%} .vph-t{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:14px;color:rgba(255,255,255,.9)} .vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .vgrid:has(.vfig:only-child){grid-template-columns:1fr} .tour{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#2b2420} .tour iframe,.tour .pano{position:absolute;inset:0;width:100%;height:100%;border:0} .tour.vid-ph{display:grid} /* ---------- Visor / lightbox ---------- */ .viewer{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:16px} .vtabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .vtab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-weight:600;font-size:14.5px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;color:var(--ink)} .vtab.on{background:var(--ink-2);border-color:var(--ink-2);color:#fff} .vpanel[hidden]{display:none} .viewer .gallery{border-radius:14px} .lb{position:relative} /* Las fotos en vertical no deben recortarse en el visor ampliado: a diferencia de las miniaturas de la galería (que sí usan cover y se recortan, como en cualquier grilla), aquí usamos una altura fija y contain, así la foto completa siempre se ve entera. El fondo se fuerza a un gris neutro (en vez del degradado de color del placeholder) para que no se vea un color raro a los costados de las fotos verticales. */ .lb-ph{height:min(70vh,560px);border-radius:14px;background:#1b1b1b} .lb-ph .ph-img{object-fit:contain} .lb-ph::before{display:none} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;z-index:4;box-shadow:var(--shadow)} .lb-nav.prev{left:12px}.lb-nav.next{right:12px} .lb-count{text-align:center;color:var(--muted);font-size:13.5px;margin-top:10px} /* ---------- Bungalow: página propia ---------- */ .sea-tag{display:inline-flex;gap:6px;align-items:center;background:var(--teal-soft);color:var(--ink);font-weight:600;font-size:13px;border-radius:999px;padding:4px 12px} .sea-big{display:flex;gap:14px;align-items:center;background:var(--teal-soft);border-radius:16px;padding:18px 20px;color:var(--ink)} .sea-big b{font-family:var(--serif);font-size:34px;line-height:1} .sea-big small{display:block;color:#5a4632} .unit-page-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-bottom:18px} .unit-page-head h1{font-size:clamp(28px,3.6vw,40px)} .checkout-box{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:24px;scroll-margin-top:calc(var(--header-h) + 20px)} .checkout-box>h2{font-size:26px;margin-bottom:6px} .checkout-box>.muted{color:var(--muted);margin:0 0 18px} @media (max-width:1020px){ .how-grid{grid-template-columns:1fr;gap:30px} .why{grid-template-columns:1fr;gap:34px} .area-grid{grid-template-columns:1fr} } @media (max-width:720px){ .hero{min-height:600px} .vgrid{grid-template-columns:1fr} .hero-search{margin-top:-30px} .after-hero{padding-top:44px;padding-bottom:64px} } #lista,#rooms{scroll-margin-top:90px} /* ---------- Panel del hotel ---------- */ .panel{padding:0;min-height:60vh} .panel-shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--header-h))} .panel-side{width:230px;flex:0 0 230px;background:var(--ink);color:#f7f1e6;padding:26px 18px;box-sizing:border-box} .panel-side .ps-brand{display:flex;align-items:center;gap:10px;margin-bottom:30px;padding:0 6px;color:#f7f1e6} .panel-side .ps-brand span{font-family:var(--serif);font-style:italic;font-weight:600;font-size:16px} .panel-side .ps-label{font-size:10.5px;font-weight:700;color:rgba(247,241,230,.45);text-transform:uppercase;letter-spacing:.06em;padding:0 6px;margin-bottom:10px} .panel-side nav{display:flex;flex-direction:column;gap:2px} .panel-side nav button{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:11px 12px;border-radius:9px;font-size:14px;color:rgba(247,241,230,.75);font-family:var(--sans)} .panel-side nav button.on{background:rgba(247,241,230,.12);color:#f7f1e6;font-weight:600} .panel-side nav button:hover{background:rgba(247,241,230,.08)} .panel-main{flex:1;min-width:0;padding:34px 36px;max-width:1180px;box-sizing:border-box} .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px} .metric-card{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)} .metric-card small{display:block;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .metric-card b{font-family:var(--serif);font-style:italic;font-size:28px;margin-top:6px;display:block;color:var(--ink);font-weight:500} @media (max-width:900px){ .panel-shell{flex-direction:column} .panel-side{width:100%;flex:none;padding:14px 16px 8px} .panel-side .ps-brand{margin-bottom:12px} .panel-side nav{flex-direction:row;overflow-x:auto;gap:6px} .panel-side nav button{white-space:nowrap} .panel-main{padding:22px 16px;max-width:none} .metric-grid{grid-template-columns:1fr 1fr} /* repeat(auto-fit,minmax(170px,1fr)) + "grid-column:span 2" en .wide obliga al grid a reservar al menos 2 columnas de 170px (340px+gap) aunque el panel-main ya sea angosto en este breakpoint, lo que producía overflow horizontal en celular. En una sola columna, "span 2" ya no tiene sentido. */ .pgrid{grid-template-columns:1fr} .pgrid .wide{grid-column:auto} } .phead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px} .phead h1{font-size:clamp(26px,3.4vw,36px)} .phead p{margin:4px 0 0;color:var(--muted)} .pact{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .pact select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;max-width:260px} .ptabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:24px} .ptabs button{border:0;background:none;padding:12px 14px;font-weight:600;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap} .ptabs button.on{color:var(--ink);border-color:var(--teal)} .pcard{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px} .pcard h3{font-family:var(--sans);font-size:18px;margin-bottom:4px} .pcard .hint{color:var(--muted);font-size:14px;margin:0 0 14px} .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px} .pgrid .wide{grid-column:span 2} .pgrid .full{grid-column:1/-1} .pgrid-head{grid-column:1/-1;font-weight:700;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 -2px;padding-top:14px;border-top:1px dashed var(--line)} .pgrid-head:first-child{border-top:0;padding-top:0;margin-top:0} .pcard .field textarea{min-height:88px} .pfoot{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:16px} .tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;background:#f3ead9;color:var(--ink)} .tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.warn{background:var(--warn-bg);color:var(--warn)} .tag.err{background:var(--err-bg);color:var(--err)} .checklist{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:10px} .checklist li{display:flex;gap:12px;align-items:flex-start} .checklist .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f3ead9;color:var(--muted);flex:none;margin-top:1px} .checklist li.ok .dot{background:var(--ok);color:#fff} .checklist b{display:block;color:var(--ink)} .checklist span{font-size:14px;color:var(--muted)} .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .slot{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#efe6d6;display:grid;place-items:center;color:var(--muted);font-size:13px} .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .slot .n{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;font-size:12px;padding:1px 8px;z-index:2} .slot label{position:absolute;left:8px;right:8px;bottom:8px;z-index:2;text-align:center;background:#fff;color:var(--ink);font-weight:600;font-size:13px;border-radius:999px;padding:5px 8px;cursor:pointer} .slot.add{background:var(--teal-soft);border:2px dashed var(--teal-line)} .slot.add label{position:static;background:var(--ink-2);color:#fff} .slot input[type=file]{position:absolute;width:1px;height:1px;opacity:0} .feedrow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-top:1px dashed var(--line)} .feedrow small{display:block;color:var(--muted)} .copybox{display:flex;gap:8px} .copybox input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;background:var(--bg)} /* Calendario visual de disponibilidad/precio por noche (pestaña Calendarios del panel del hotel): precio por fecha y cierre manual, además de lo que ya bloquea la sincronización iCal. */ .calcard{padding:18px 20px} .calnav{display:flex;align-items:center;gap:10px} .calnav b{font-family:var(--serif);font-size:15.5px;font-weight:600;text-transform:capitalize;min-width:150px;text-align:center} .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .calgrid-wd{margin-bottom:4px} .calgrid-wd span{text-align:center;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;padding:2px 0} .calday{height:56px;border-radius:10px;border:1.5px solid var(--line);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-family:inherit;color:var(--ink);padding:3px 2px;cursor:default} button.calday{cursor:pointer} button.calday:hover{border-color:var(--teal)} .calday.past{opacity:.45} .calday-num{font-weight:600} .calday-tag{font-size:9.5px;font-weight:700;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)} .calday-open.special{border-color:var(--teal)} .calday-open.special .calday-tag{color:var(--teal)} .calday-booked{background:var(--teal-soft);border-color:var(--teal-line)} .calday-booked .calday-tag{color:var(--teal)} .calday-ota{background:var(--warn-bg);border-color:#ecd6a8} .calday-ota .calday-tag{color:var(--warn)} .calday-closed{background:#e7e2d6;border-color:#d8cfba} .calday-closed .calday-tag{color:var(--ink-2)} .calleg{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:12px;color:var(--muted)} .calleg span{display:flex;align-items:center;gap:6px} .calleg .dot{width:12px;height:12px;border-radius:4px;flex:none;display:inline-block} /* Tipografía para el HTML enriquecido que guarda el editor de "Contenido del sitio" (admin.html) y que se pinta en las páginas públicas (sobre-nosotros, términos, privacidad, trabaja con nosotros, guía del asesor). Aislado en su propia clase para que las viñetas, los títulos y los links del contenido editable no choquen con los estilos generales del resto del sitio. */ .prose{font-family:var(--sans);color:var(--ink-2,#4a3728)} .prose>:first-child{margin-top:0} .prose p{margin:0 0 16px;line-height:1.75} .prose h2{font-family:var(--serif);font-size:24px;color:var(--ink);margin:30px 0 10px;line-height:1.2} .prose h3{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--ink);margin:26px 0 8px;line-height:1.3} .prose ul,.prose ol{margin:0 0 16px;padding-left:22px} .prose li{margin:0 0 8px} .prose a{color:var(--ink-2);font-weight:600;text-decoration:underline} .prose a:hover{color:var(--ink)} .prose strong,.prose b{font-weight:700;color:var(--ink)} /* Editor de texto enriquecido en "Contenido del sitio" del panel de administración: barra de herramientas propia (sin paquete externo, sin su set de imágenes/sprites — eso fue lo que se rompía antes) sobre un
, con los mismos tokens de color/tipografía del sitio para que no se vea como un widget ajeno. Documento con borde suave, fondo blanco y sombra elegante. */ .rte{border:1.5px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(43,36,32,.07);overflow:hidden} .rte-tb{display:flex;align-items:center;gap:2px;padding:7px 10px;border-bottom:1.5px solid var(--line);background:var(--bg);flex-wrap:wrap} .rte-tb-btn{border:0;background:transparent;border-radius:7px;padding:7px 9px;min-width:32px;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit} .rte-tb-btn:hover{background:var(--sand);color:var(--ink)} .rte-tb-text{font-size:12px;font-weight:700} .rte-tb-sep{width:1px;height:20px;background:var(--line);margin:0 6px;flex:none} .rte-editable{padding:14px 16px;min-height:160px;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);outline:none} .rte-editable:empty::before{content:attr(data-placeholder);color:var(--muted);font-style:normal} .rte-editable h2{font-family:var(--serif);font-size:19px;margin:12px 0 6px;color:var(--ink)} .rte-editable h3{font-size:15.5px;font-weight:700;margin:10px 0 5px;color:var(--ink)} .rte-editable p{margin:0 0 10px} .rte-editable ul,.rte-editable ol{margin:0 0 10px;padding-left:22px} .rte-editable a{color:var(--ink-2);text-decoration:underline} .rte-pair{display:grid;gap:18px} @media (min-width:860px){.rte-pair{grid-template-columns:1fr 1fr}} /* Banner "Guía de configuración" al inicio de cada sección del panel, y accesos rápidos en Resumen */ .guide-bar{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:12px;padding:10px 14px;margin-bottom:18px;flex-wrap:wrap} .guide-bar span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);font-weight:600} .guide-bar button{flex:none} .guide-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111} .guide-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .guide-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .guide-steps li{display:flex;gap:10px;align-items:flex-start;font-size:14px} .guide-steps li b{flex:none;width:22px;height:22px;border-radius:50%;background:#f3ead9;color:var(--ink);display:grid;place-items:center;font-size:12.5px;margin-top:1px} .quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0} .quick-actions button{display:flex;align-items:center;gap:8px} .ptable th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap} .ptable td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top} .tablewrap{overflow-x:auto} .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:200;font-size:14.5px;max-width:90vw} .toast.on{opacity:1;transform:translateX(-50%)} .toast.err{background:var(--err)} .toast.ok{background:var(--ok)} /* Variante "corner": solo la usa el guardado de "Contenido del sitio" en admin.html (vía toast(msg,kind,{cls:'corner'})) — el toast por defecto de esta y otras páginas (centrado, abajo) sigue exactamente igual para todo lo demás. */ .toast.corner{left:auto;right:20px;bottom:auto;top:20px;border-radius:12px;transform:translateY(-14px);max-width:min(320px,calc(100vw - 40px))} .toast.corner.on{transform:translateY(0)} @media (max-width:480px){.toast.corner{right:12px;top:12px;left:12px;max-width:none;text-align:center}} .loginbox{max-width:440px;margin:30px auto} details.help{margin:12px 0 0;font-size:14px;color:var(--muted)} details.help summary{cursor:pointer;font-weight:600;color:var(--ink-2)} details.help ol{margin:8px 0 0;padding-left:20px} /* ---------- Menú del usuario ---------- */ .user-menu{position:relative} .avatar-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 4px;cursor:pointer;color:var(--ink);font-weight:600;font-size:14px} .avatar-btn:hover{border-color:var(--teal)} .avatar-c{width:32px;height:32px;border-radius:50%;background:var(--ink-2);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700} .avatar-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;z-index:60} .menu[hidden]{display:none} .menu-h{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column} .menu-h small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu button,.menu a{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:10px;border-radius:10px;cursor:pointer;color:var(--text);font-size:14.5px;text-decoration:none} .menu button:hover,.menu a:hover{background:var(--teal-soft)} .menu hr{border:0;border-top:1px solid var(--line);margin:6px 0} @media (max-width:720px){.avatar-name{display:none}.avatar-btn{padding-right:6px}} /* ---------- Pantalla de administrador ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .stat{background:#fff;border:0;border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:inherit} .stat.link{cursor:pointer;transition:transform .15s}.stat.link:hover{transform:translateY(-2px)} .stat small{color:var(--muted);font-size:13.5px} .stat b{font-family:var(--serif);font-size:32px;color:var(--ink);line-height:1.1} .stat span{color:var(--muted);font-size:13px} .tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;white-space:nowrap} .tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.warn{background:var(--warn-bg);color:var(--warn)} .tag.err{background:var(--err-bg);color:var(--err)}.tag.mute{background:#f3ead9;color:#6b5d4a} .tag .x{border:0;background:none;cursor:pointer;color:inherit;font-size:15px;line-height:1;padding:0 0 0 4px} .badge-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--err);color:#fff;font-size:12px;font-weight:700;margin-left:4px} .ptable a{color:var(--ink-2);font-weight:600} /* ---------- Botón flotante de WhatsApp (aparece solo si el admin cargó el enlace) ---------- */ .wa-float{position:fixed;left:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-lg);transition:transform .15s} .wa-float:hover{transform:scale(1.06)} @media(max-width:640px){.wa-float{width:48px;height:48px;left:14px;bottom:14px}} /* ---------- Asistente flotente (chatbot) ---------- */ .chatbot{position:fixed;right:18px;bottom:18px;z-index:70} .chat-fab{width:56px;height:56px;border-radius:50%;border:0;background:var(--ink-2);color:#fff;box-shadow:var(--shadow-lg);cursor:pointer;display:grid;place-items:center} .chat-fab:hover{background:var(--ink)} .chat-panel{position:absolute;right:0;bottom:70px;width:min(380px,calc(100vw - 36px));max-height:min(560px,78vh);background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden} .chat-panel[hidden]{display:none!important} .chat-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-shrink:0} .chat-h b{display:block;font-size:15px;color:var(--ink)} .chat-h small{color:var(--muted);font-size:12.5px} .chat-h .icon-btn{margin-left:auto} .chat-mark{width:34px;height:34px} .chat-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--bg);min-height:180px} .chat-msg{border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.45;max-width:88%;box-shadow:var(--shadow);word-break:break-word} .chat-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:4px} .chat-msg.user{align-self:flex-end;background:var(--ink-2);color:#fff;border-bottom-right-radius:4px} .chat-msg.typing{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px} .chat-msg .dots{display:inline-flex;gap:4px} .chat-msg .dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block;animation:chatDot 1.2s infinite ease-in-out} .chat-msg .dots i:nth-child(2){animation-delay:.15s} .chat-msg .dots i:nth-child(3){animation-delay:.3s} @keyframes chatDot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .chat-link{background:none;border:0;color:inherit;font-weight:600;text-decoration:underline;cursor:pointer;padding:0;font-size:14px} .chat-msg.bot .chat-link{color:var(--ink-2)} .chat-msg.user .chat-link{color:#fff} .chat-footer{flex-shrink:0;border-top:1px solid var(--line);background:#fff;padding:10px 12px 12px} .chat-menu{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px} .chat-menu[hidden]{display:none!important} .chat-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%} .chat-menu .chip,.chat-chips .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:12.5px;cursor:pointer;color:var(--ink);font-weight:500} .chat-menu .chip:hover,.chat-chips .chip:hover{border-color:var(--ink-2);color:var(--ink-2)} .chat-compose{display:flex;gap:8px;align-items:center} .chat-compose input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font:inherit;font-size:14px;outline:none} .chat-compose input:focus{border-color:var(--ink-2)} .chat-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--ink-2);color:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0} .chat-send:hover{background:var(--ink)} .chat-reset{display:block;width:100%;margin-top:8px;border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;text-align:center;padding:4px} .chat-reset:hover{color:var(--ink-2);text-decoration:underline} .chat-close{flex-shrink:0} @media (max-width:720px){.chatbot{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.chat-panel{bottom:66px}} /* Barra de búsqueda estilo compacto (inspirada en OTAs, identidad propia) — ancho contenido y centrado (nunca de punta a punta de la pantalla), forma "pill" con los 4 módulos distribuidos proporcionalmente: Destino ~28%, Fechas ~32%, Huéspedes ~22%, Buscar ~18%. */ .bk-search{ position:relative;z-index:6;margin:-44px auto 0;max-width:880px;width:calc(100% - 24px); display:flex;align-items:stretch;background:#fff;border-radius:9999px; box-shadow:0 10px 30px rgba(15,40,55,.10);overflow:visible } .bk-seg{display:flex;align-items:center;gap:10px;padding:10px 16px;min-width:0;position:relative;border-right:1px solid var(--line)} .bk-dest{flex:0 1 28%} .bk-dest-panel{ position:absolute;left:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 32px)); max-height:280px;overflow:auto;background:#fff;border-radius:14px; box-shadow:0 12px 40px rgba(15,40,55,.18);border:1px solid var(--line);padding:6px;z-index:20 } .bk-dest-panel[hidden]{display:none!important} .bk-dest-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;border-radius:8px;font:inherit;font-size:14.5px;cursor:pointer;color:var(--ink)} .bk-dest-item:hover,.bk-dest-item:focus-visible{background:var(--sand-2,#f3ede1);outline:none} .bk-dest-item[hidden]{display:none} .bk-dates{flex:0 1 32%} .bk-occ{flex:0 1 22%;padding:0} .bk-ico{flex-shrink:0;color:var(--ink-2);opacity:.85} .bk-fields-inner{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .bk-label{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.01em} .bk-input{border:0;background:transparent;padding:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);width:100%;min-height:auto;outline:none;cursor:pointer} .bk-input[type=date]{font-weight:600} /* El destino ahora se escribe (datalist) en vez de elegirse de un