/* public/landing/portada.css · lo propio de la portada de operadorhospitality.com (encargo 1033, 21-oct-2026).
   Es la traduccion de la maqueta aprobada por Eduardo (docs/encargo-1033/portada-ronda3/): menos letra a la vista,
   mas imagen, y el texto completo plegado en «Ver mas». En el telefono el heroe es el compacto de la ronda 1.
   Carga DESPUES de piel.css y usa sus tokens --oh-*: los tokens siguen viviendo en piel.css, la hoja que la portada
   comparte con /gestion/. Aqui solo vive el acomodo de las secciones de esta pagina. */
.sec2{padding:88px 0}.sec2.b{background:#FFFFFF}
@media (max-width:700px){.sec2{padding:60px 0}}
.cabeza{display:flex;flex-direction:column;gap:12px;max-width:760px}
.linea{font-size:19px;line-height:1.5;color:var(--oh-tinta2);margin:0}
@media (max-width:700px){.linea{font-size:17px}}
.oscuro .linea{color:var(--oh-claro)}

/* el heroe: dos versiones del mismo bloque, una por ancho */
.hero-cel{display:none}
@media (max-width:700px){.hero-esc{display:none}.hero-cel{display:flex}}
.gancho{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:4px 0 2px;max-width:640px}
.gancho div{display:flex;flex-direction:column;gap:3px;border-left:2px solid var(--oh-agua);padding-left:12px}
.gancho b{color:#FFFFFF;font-size:16px;font-weight:600}
.gancho span{color:var(--oh-claro);font-size:14.5px;line-height:1.45}
@media (max-width:560px){.gancho{grid-template-columns:1fr}}

/* «Ver mas» */
.vermas{margin-top:8px}
.vermas summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--oh-teal);min-height:44px}
.vermas summary::-webkit-details-marker{display:none}
.vermas summary:after{content:'';width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.vermas[open] summary:after{transform:rotate(-135deg)}
.vermas .cuerpo{margin-top:6px;font-size:16px;line-height:1.65;color:var(--oh-tinta2);max-width:760px}
.vermas .cuerpo p{margin:0 0 12px}
.oscuro .vermas summary{color:var(--oh-agua)}
.oscuro .vermas .cuerpo{color:var(--oh-claro)}

/* las tarjetas de capacidades: se deslizan de lado en todos los anchos */
.desliza{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 18px;margin:0;scrollbar-width:none}
.desliza::-webkit-scrollbar{display:none}
@media (max-width:700px){.desliza{padding:6px var(--sr) 18px var(--sl);margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));scroll-padding-inline:var(--sl)}}
.tar{flex:0 0 320px;scroll-snap-align:start;background:#FFFFFF;border-radius:var(--oh-radio);box-shadow:var(--oh-sombra);overflow:hidden;display:flex;flex-direction:column}
@media (max-width:420px){.tar{flex-basis:84%}}
.tar .img{height:190px;background:var(--oh-noche) center top/cover no-repeat;position:relative}
/* Arqui 21-oct (Eduardo): la pantalla va completa, dentro de un marco con aire alrededor; nunca recortada */
.tar .img.sc{background:linear-gradient(150deg,#E6F0F2,#F6F5EF);padding:14px 16px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.tar .img.sc img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;box-shadow:0 6px 18px rgba(15,37,48,.18),0 0 0 1px rgba(15,37,48,.06)}
.tar .img.sc.ficha{background:linear-gradient(150deg,#F3E9D6,#F6F5EF)}
.tar .img.sc.ficha img{border-radius:14px}
.tar .tx{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.tar .eti{font-size:11px}
.tar b{font-size:18px;line-height:1.3;font-weight:600}
.tar p{margin:2px 0 0;font-size:14.5px;line-height:1.55;color:var(--oh-tinta2)}
.tar .gr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px}
.tar .etis{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nuevo{font:500 11px var(--oh-mono);letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF;background:var(--oh-teal);border-radius:999px;padding:3px 9px;align-self:flex-start}
.resena{background:#FFFFFF;border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.4;color:var(--oh-tinta);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.resena i{font-style:normal;color:#B8862B;letter-spacing:1px}
.resena .sug{margin-top:6px;border-top:1px solid #EEEDE6;padding-top:6px;color:var(--oh-teal);font-weight:600}
/* la tarjeta de Lealtad: el perfil de un huesped frecuente */
.leal{background:#FFFFFF;border-radius:14px;padding:12px 14px;color:var(--oh-tinta);box-shadow:0 6px 16px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.4}
.leal b{font-size:14px}
.leal .niv{align-self:flex-start;font:500 10.5px var(--oh-mono);letter-spacing:.08em;text-transform:uppercase;background:#F4EBDB;color:#7A5410;border-radius:999px;padding:2px 8px}
.leal .cod{font:500 12px var(--oh-mono);color:var(--oh-teal)}

/* las aplicaciones: tres columnas; en el telefono se deslizan */
.apps3{display:grid;grid-template-columns:1.4fr 1.4fr .8fr;gap:20px;align-items:end}
.app{display:flex;flex-direction:column;gap:12px;min-width:0}
.app .nom{font-size:20px;font-weight:600}
.app .una{font-size:15px;color:var(--oh-tinta2);margin:-6px 0 0}
.app ul{margin:2px 0 0;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--oh-tinta2)}
.app .tel{max-width:220px}
/* Arqui 21-oct (Eduardo): la sombra no se encima en el titulo; la imagen sube y la sombra se suaviza en fondo claro */
.app .marco,.app .tel{margin-bottom:26px;box-shadow:0 18px 40px rgba(15,37,48,.22)}
@media (max-width:900px){.apps3{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));padding:0 var(--sr) 12px var(--sl);scroll-padding-inline:var(--sl);scrollbar-width:none}.apps3::-webkit-scrollbar{display:none}.app{flex:0 0 82%;scroll-snap-align:start}.app.telw{flex:0 0 82%}.app.telw .tel{max-width:none;height:200px;border-radius:20px;border-width:4px}.app.telw .tel .vid{width:100%;height:100%;object-fit:cover;object-position:top}}

/* actualizaciones recientes */
.novc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.novc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--sr) 8px var(--sl);margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));scroll-padding-inline:var(--sl);scrollbar-width:none}.novc::-webkit-scrollbar{display:none}.novc .nov{flex:0 0 78%;scroll-snap-align:start}}

/* el cotizador: en escritorio todos los modulos a la vista; en el telefono, la tira que se desliza */
.solo-esc{display:grid}.solo-cel{display:none}
@media (max-width:900px){.solo-esc{display:none}.solo-cel{display:flex}}
.memg>.mgrid{flex:1 1 100%;min-width:0}
.mgrid{gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--sr) 12px var(--sl);margin:0 calc(-1 * var(--sr)) 0 calc(-1 * var(--sl));scroll-padding-inline:var(--sl);scrollbar-width:none}
.mgrid::-webkit-scrollbar{display:none}
.mchip{flex:0 0 190px;scroll-snap-align:start;background:#FFFFFF;border-radius:18px;box-shadow:var(--oh-sombra);padding:16px;display:flex;flex-direction:column;gap:10px;min-height:136px;border:1px solid #E2E0D8;text-align:left;font:inherit;color:inherit;cursor:pointer}
.mchip[aria-pressed="true"]{border-color:var(--oh-teal);box-shadow:inset 0 0 0 1px var(--oh-teal),0 8px 24px rgba(19,112,127,.12)}
.mchip .ic{width:28px;height:28px;border-radius:9px;border:1.5px solid #B9C2C8;display:grid;place-items:center;color:transparent;background:#FFFFFF}
.mchip[aria-pressed="true"] .ic{background:var(--oh-teal);border-color:var(--oh-teal);color:#FFFFFF}
.mchip b{font-size:16px;line-height:1.3}
.mchip .pr{font:500 13px var(--oh-mono);color:var(--oh-tinta3);margin-top:auto}
.mchip .insignia{font-size:10.5px;padding:3px 8px}
.ins-nuevo{background:var(--oh-teal);color:#FFFFFF}

/* gestion integral */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:760px){.tres{grid-template-columns:minmax(0,1fr)}}
.paso{background:#FFFFFF;border-radius:var(--oh-radio);box-shadow:var(--oh-sombra);padding:26px;display:flex;flex-direction:column;gap:10px}
.paso .n{font:500 34px var(--oh-mono);color:var(--oh-oro)}
.paso b{font-size:20px}
.paso span:last-child{color:var(--oh-tinta2);line-height:1.55}
.tiposc{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tiposc li{background:#FFFFFF;border:1px solid #E2E4DE;border-radius:var(--oh-pildora);padding:9px 16px;font-size:14.5px}