/*
 * Parte de abajo del catálogo (27 sep 2026) con el design system de
 * design-systems/airbnb/: categorías, catálogo, por qué elegirnos, reseñas,
 * información, footer, promo y botón de WhatsApp.
 *
 * Los valores salen de tokens.json. La excepción de marca es el naranja de
 * TWINS: #FF4500 como acento (estrellas, íconos, marcas pequeñas) y
 * #D63A00 para botones con texto blanco. WhatsApp va en #25D366.
 *
 * Todas las clases llevan el prefijo ab- para no heredar las capas viejas
 * de catalog.css y brand.css, que siguen sirviendo al hero y a la reserva.
 */

:root{
  --ab-accent:#ff4500; --ab-cta:#d63a00; --ab-on-cta:#ffffff; --ab-wa:#25d366;
  --ab-ink:#222222; --ab-muted:#6a6a6a; --ab-grey:#c1c1c1; --ab-line:#ebebeb; --ab-deco:#dddddd;
  --ab-canvas:#f7f7f7; --ab-surface:#ffffff; --ab-edge:transparent;
  --ab-shadow-subtle:rgba(0,0,0,.02) 0 0 0 1px,rgba(0,0,0,.04) 0 2px 6px 0,rgba(0,0,0,.1) 0 4px 8px 0;
  --ab-shadow-dropdown:0 6px 20px rgba(0,0,0,.2);
  --ab-shadow-tooltip:0 2px 4px rgba(0,0,0,.18);
  --ab-r-card:12px; --ab-r-input:8px; --ab-r-pill:9999px;
  --ab-logo-filter:none;
}
/* La web es solo clara (pedido de Angel, 27 sep 2026): no hay tema oscuro. */



.ab-offers,.ab-catalog,.ab-why,.ab-reviews,.ab-policies,.ab-footer{color:var(--ab-ink);font-size:14px;line-height:1.43;font-feature-settings:"salt" on}
.ab-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── botones ── */
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;height:48px;margin:0;padding:0 24px;border-radius:var(--ab-r-pill);font:inherit;font-size:16px;font-weight:500;line-height:1.25;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,filter .2s}
.ab-btn-primary{border:0;background:var(--ab-cta);color:var(--ab-on-cta)}
.ab-btn-primary:hover{filter:brightness(.92)}
.ab-btn-ghost{height:40px;padding:0 16px;border:1px solid var(--ab-ink);border-radius:var(--ab-r-input);background:transparent;color:var(--ab-ink);font-size:14px}
.ab-btn-ghost:hover{background:var(--ab-canvas)}
.ab-link{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}

/* ── promociones con el estilo de la app TWINS Rent Car (app/catalogo.js) ──
   Colores de la app, letra Outfit y proporción 340×138. Las medidas van en
   cqw (porcentaje del ancho de la tarjeta), así se ven igual en el teléfono y
   en la PC. Es un carrusel: dos a la vista en la PC, una con la siguiente
   asomando en el móvil; avanza solo cada 6 s (catalog.js). */
.ab-offers{background:var(--ab-surface);padding:32px 0 8px}
.ab-offer-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/2);gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.ab-offer-track::-webkit-scrollbar{display:none}
.ab-offer{position:relative;display:flex;align-items:stretch;width:100%;aspect-ratio:340/138;margin:0;padding:0;overflow:hidden;border:0;border-radius:20px;background:#15151a;color:#ffffff;font-family:'Outfit',var(--font);text-align:left;cursor:pointer;container-type:inline-size;scroll-snap-align:start}
.ab-offer:focus-visible{outline:2px solid var(--ab-ink);outline-offset:-4px;border-radius:20px}
.ab-offer-copy{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;gap:2.35cqw;min-width:0;padding:0 12px 0 16px;padding:0 3.53cqw 0 4.7cqw}
.ab-offer-tag{display:inline-flex;align-items:center;height:24px;height:7.06cqw;padding:0 10px;padding:0 2.94cqw;border-radius:9999px;background:#f67205;color:#000000;font-size:11.5px;font-size:3.38cqw;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.ab-offer-title{font-size:22px;font-size:6.47cqw;font-weight:800;line-height:1.09;letter-spacing:-.02em;white-space:pre-line}
.ab-offer-sub{color:rgba(255,255,255,.72);font-size:12.5px;font-size:3.68cqw;font-weight:500;line-height:1.3}
.ab-offer-photo{flex:none;width:37.75%;height:100%;object-fit:cover}
/* viajes largos: degradado naranja de la app, etiqueta blanca */
.ab-offer-long{background:linear-gradient(110deg,#d63a00 0%,#f67205 100%)}
.ab-offer-long .ab-offer-tag{background:#ffffff}
.ab-offer-long .ab-offer-sub{color:rgba(255,255,255,.85)}
/* modelo exacto: foto a sangre con sombra a la izquierda, como el comercial de la app */
.ab-offer-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 60%}
.ab-offer-exact::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.3) 62%,rgba(0,0,0,0) 100%)}
.ab-offer-exact .ab-offer-copy{z-index:2}
/* aeropuertos: el verde de la app */
.ab-offer-air{background:#0e3b2a}
.ab-offer-air .ab-offer-tag{background:#30d158}
.ab-offer-dots{display:flex;justify-content:center;gap:4px;margin-top:12px}
.ab-offer-dots span{width:6px;height:6px;border-radius:9999px;background:var(--ab-deco);transition:width .2s,background-color .2s}
.ab-offer-dots span.is-on{width:18px;background:var(--ab-accent)}

/* ── catálogo ── */
.ab-catalog{background:var(--ab-surface);padding-bottom:48px}
.ab-list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:32px 0 24px}
.ab-list-copy{flex:1;min-width:0}
.ab-list-copy h2{margin:0;font-family:'Outfit',var(--font);font-size:28px;line-height:1.18;font-weight:800;letter-spacing:-.02em}
.ab-list-copy p{margin:8px 0 0;color:var(--ab-muted)}
.ab-list-copy p:empty{display:none}
.ab-sort{position:relative;display:flex;align-items:center;flex:none}
.ab-sort svg{position:absolute;pointer-events:none;color:var(--ab-ink)}
.ab-sort svg:first-of-type{left:16px}
.ab-sort svg:last-of-type{right:16px}
.ab-sort select{height:40px;margin:0;padding:0 44px;border:1px solid var(--ab-deco);border-radius:var(--ab-r-pill);background:var(--ab-surface);color:var(--ab-ink);font:inherit;font-size:14px;font-weight:500;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .2s}
.ab-sort select:hover{border-color:var(--ab-ink)}

#grid.ab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 24px;padding:0}
.ab-card{display:flex;flex-direction:column;gap:12px;min-width:0;color:inherit;border-radius:var(--ab-r-card);cursor:pointer}
.ab-card:focus-visible{outline:2px solid var(--ab-ink);outline-offset:4px;border-radius:var(--ab-r-card)}
.ab-media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--ab-r-card);background:var(--ab-canvas)}
.ab-media img{display:block;width:100%;height:100%;object-fit:cover}
.ab-media svg.car{position:absolute;left:4%;bottom:20%;width:92%;height:auto}
.ab-card.is-booked .ab-media img,.ab-card.is-booked .ab-media svg.car{opacity:.5}
.ab-badge{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);padding:6px 12px;border-radius:var(--ab-r-pill);background:#ffffff;color:#222222;font-size:12px;font-weight:600;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--ab-shadow-tooltip)}
.ab-card-info{display:flex;flex-direction:column;min-width:0}
.ab-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:14px;font-weight:500}
.ab-meta{color:var(--ab-muted)}
.ab-price{margin-top:4px}
.ab-price b{font-weight:600}
.ab-price s{margin-right:4px;color:var(--ab-muted)}
.ab-total{color:var(--ab-muted);text-decoration:underline;text-underline-offset:2px}
.ab-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 16px;text-align:center;color:var(--ab-muted)}
.ab-empty p{margin:0;max-width:48ch;font-size:16px}
.ab-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ── encabezado de sección compartido ── */
.ab-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.ab-section-copy{max-width:640px;min-width:0}
.ab-kicker{display:block;margin-bottom:8px;color:var(--ab-muted);font-size:14px;font-weight:500}
.ab-section-copy h2{margin:0;font-size:28px;line-height:1.43;font-weight:700}
.ab-section-copy p{margin:8px 0 0;color:var(--ab-muted);font-size:16px}

/* ── por qué elegirnos: cuatro razones separadas por líneas finas ── */
.ab-why{background:var(--ab-surface);border-top:1px solid var(--ab-line);padding:48px 0}
.ab-reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ab-reason{min-width:0;padding-top:24px;border-top:1px solid var(--ab-line)}
.ab-reason-icon{display:block;margin-bottom:16px;color:var(--ab-accent);line-height:0}
.ab-reason h3{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.25}
.ab-reason p{margin:0;color:var(--ab-muted)}

/* ── reseñas: lienzo gris claro y tarjetas blancas en carrusel ── */
.ab-reviews{background:var(--ab-canvas);padding:48px 0}
.ab-arrows{display:flex;gap:8px;flex:none}
.ab-arrow{display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--ab-r-pill);background:var(--ab-surface);color:var(--ab-ink);box-shadow:var(--ab-shadow-subtle);cursor:pointer;transition:transform .2s}
.ab-arrow:hover{transform:scale(1.04)}
.ab-source{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:24px;padding:16px 16px 16px 24px;border:1px solid var(--ab-edge);border-radius:var(--ab-r-card);background:var(--ab-surface)}
.ab-source-main{display:flex;align-items:center;gap:16px;min-width:0}
.ab-source-icon{flex:none;color:var(--ab-ink);line-height:0}
.ab-source-main strong{display:block;font-size:16px;font-weight:600;line-height:1.25}
.ab-source-main div>span{display:block;margin-top:4px;color:var(--ab-muted)}
.ab-reviews .ab-btn-ghost:hover{background:var(--ab-canvas)}
.ab-review-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;margin:-4px;padding:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none}
.ab-review-track::-webkit-scrollbar{display:none}
.ab-review-track:focus-visible{outline:2px solid var(--ab-ink);outline-offset:4px;border-radius:var(--ab-r-card)}
.ab-review{display:flex;flex-direction:column;gap:16px;min-width:0;padding:24px;border:1px solid var(--ab-edge);border-radius:var(--ab-r-card);background:var(--ab-surface);scroll-snap-align:start}
.ab-review-author{order:3;display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px}
.ab-avatar{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--ab-r-pill);background:var(--ab-ink);color:var(--ab-surface);font-size:16px;font-weight:600}
.ab-review-author>div{min-width:0}
.ab-review-author a{display:block;overflow:hidden;color:var(--ab-ink);font-size:16px;font-weight:600;line-height:1.25;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.ab-review-author a:hover{text-decoration:underline;text-underline-offset:2px}
.ab-review-author>div>span{display:block;margin-top:4px;color:var(--ab-muted)}
.ab-stars{order:0;display:flex;gap:4px;color:var(--ab-accent)}
.ab-stars svg{width:12px;height:12px;fill:currentColor}
.ab-review-text{order:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;margin:0;font-size:16px;line-height:1.43;white-space:pre-line;overflow-wrap:anywhere}
.ab-review-text.is-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.ab-review-text.is-empty{color:var(--ab-muted);font-size:14px}
.ab-more{order:2;align-self:flex-start;margin:-8px 0 0;padding:0;border:0;background:none;color:var(--ab-ink);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* ── política de reembolso: título a la izquierda, acordeón a la derecha ── */
.ab-policies{background:var(--ab-surface);padding:48px 0}
.ab-policies-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:48px}
.ab-policies-grid h2{margin:0;padding-top:12px;font-size:22px;line-height:1.18;font-weight:500;letter-spacing:-.44px}
.ab-acc{min-width:0}
.ab-acc .ab-acc-item{border-top:0;border-bottom:1px solid var(--ab-line)}
.ab-acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;font-size:16px;font-weight:500;line-height:1.25;cursor:pointer}
.ab-acc summary::-webkit-details-marker{display:none}
.ab-acc summary svg{flex:none;transition:transform .2s}
.ab-acc-item[open] summary svg{transform:rotate(180deg)}
.ab-acc-item p{max-width:65ch;margin:0 0 16px;color:var(--ab-muted)}

/* ── footer: tres columnas de enlaces sobre gris claro ── */
.ab-footer{background:var(--ab-canvas);border-top:1px solid var(--ab-deco);padding:48px 0 calc(96px + env(safe-area-inset-bottom,0px))}
.ab-foot-cols{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px 24px}
.ab-foot-brand a{display:inline-block;line-height:0}
.ab-foot-brand img{width:89px;height:64px;object-fit:contain;filter:var(--ab-logo-filter)}
.ab-foot-brand p{margin:12px 0 0;color:var(--ab-muted)}
.ab-foot-brand strong{display:block;color:var(--ab-ink);font-weight:600}
.ab-foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.ab-foot-col h2{margin:0;font-size:14px;font-weight:600;line-height:1.43}
.ab-foot-col a,.ab-foot-col span,.ab-foot-col .ab-link{color:var(--ab-muted);font-size:14px;text-decoration:none;transition:color .2s}
.ab-foot-col a:hover,.ab-foot-col .ab-link:hover{color:var(--ab-ink)}
.ab-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--ab-deco)}
.ab-foot-legal,.ab-foot-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ab-foot-legal a{color:inherit;text-decoration:none}
.ab-foot-legal a:hover{text-decoration:underline;text-underline-offset:2px}
.ab-footer #themeBtn{color:var(--ab-ink)!important;font-weight:500}
.ab-footer #themeBtn:hover{text-decoration:underline;text-underline-offset:2px}

/* ── promo flotante y WhatsApp ── */
.ab-icon-btn{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:var(--ab-r-pill);background:var(--ab-canvas);color:var(--ab-ink);cursor:pointer}
.ab-icon-btn:hover{background:var(--ab-line)}
.ab-wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--ab-r-pill);background:var(--ab-wa);box-shadow:var(--ab-shadow-dropdown);transition:transform .2s}
.ab-wa:hover{transform:scale(1.04)}
/* Oculto hasta que haya número (el atributo hidden no le gana a display:grid) y nunca encima de la reserva. */
.ab-wa[hidden],body.is-booking .ab-wa{display:none}

/* ── tableta ── */
@media(max-width:1100px){
  .ab-offer-track{grid-auto-columns:calc((100% - 16px)/2);gap:16px;margin-inline:calc(clamp(16px,3vw,40px)*-1);padding-inline:clamp(16px,3vw,40px);scroll-padding-inline:clamp(16px,3vw,40px)}
}
@media(max-width:1000px){
  .ab-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-review-track{grid-auto-columns:calc((100% - 24px)/2)}
  .ab-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-foot-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .ab-offers{padding:16px 0 0}
  .ab-offer-track{grid-auto-columns:88%;gap:12px}
  .ab-offer{border-radius:18px}
  .ab-section-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:24px}
  .ab-arrows{display:none}
  .ab-review-track{grid-auto-columns:85%;gap:12px}
  .ab-policies-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .ab-policies-grid h2{padding-top:0}
}
/* ── móvil ── */
@media(max-width:600px){
  /* título y orden en la misma fila, como en la PC: el orden se compacta y el título se ajusta al ancho */
  .ab-list-head{gap:8px;padding:24px 0 16px}
  .ab-list-copy h2{font-size:clamp(17px,5vw,22px);white-space:nowrap}
  .ab-sort select{height:36px;padding:0 28px 0 12px;font-size:13px}
  .ab-sort svg:last-of-type{right:10px}
  .ab-sort svg:first-of-type{display:none}
  #grid.ab-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .ab-card{gap:8px}
  .ab-meta,.ab-price{font-size:13px}
  .ab-badge{top:8px;left:8px;max-width:calc(100% - 16px);padding:4px 8px;font-size:11px}
  .ab-why,.ab-reviews,.ab-policies{padding:40px 0}
  .ab-section-head .ab-btn{width:100%}
  .ab-reasons{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-reason{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 16px;padding:20px 0}
  .ab-reason:last-child{padding-bottom:0}
  .ab-reason-icon{grid-row:1/3;margin:0}
  .ab-reason p{grid-column:2}
  .ab-source{padding:16px}
  .ab-source .ab-btn{width:100%}
  .ab-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-footer{padding-top:40px}
}

/* Source link lets visitors check the author's original Google reviews. */
.ab-review-author a.ab-review-source{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:8px;padding:6px 10px;border:1px solid var(--ab-line);border-radius:var(--ab-r-pill);background:var(--ab-canvas);color:var(--ab-muted);font-size:12px;font-weight:500;line-height:1.43;white-space:normal;overflow:visible}
.ab-review-author a.ab-review-source:hover{color:var(--ab-ink);border-color:var(--ab-deco)}
.ab-review-source svg{flex:none}
.ab-review-source:focus-visible{outline:2px solid var(--ab-ink);outline-offset:2px}