/* =========================================================================== Estilos de artículos "ricos" del blog (tabla news). Se cargan desde components/public/pages/noticias.php. ¿Por qué acá y no dentro del del post? Para que, al editar el artículo en el admin, NO tengas que ver ni tocar el CSS: en el editor solo aparece el texto con etiquetas simples. El diseño vive acá y se aplica solo por las clases (.qh-post, .qh-card, etc.). Especificidad: home.css (.noticia-article__body h2,h3) fuerza color var(--ink) y font-weight:300. Por eso las reglas críticas van scopeadas como `.qh-post .clase` (2 clases) para ganar la cascada. Este archivo se incluye DESPUÉS de home.css para resolver también los empates de un solo nivel. Prefijo por diseño: qh- -> "Qué hacer en la Región del Biobío: 15 panoramas cerca del hotel" =========================================================================== */ /* ----------------------------- qh- (panoramas) ---------------------------- */ .qh-post{--pine:#1f4a44;--pine-deep:#143530;--teal:#2d7d74;--copper:#c26a3d;--sand:#d9a441;--cream:#fbf7ef;--ink:#26332f;color:var(--ink)} .qh-post p{line-height:1.75} .qh-post strong{color:var(--copper);font-weight:600} .qh-hero{position:relative;padding:2.4rem 1.7rem 2rem;border-radius:18px;background:linear-gradient(135deg,#f2f6ef,#e6efe2 60%,#dfeadb);overflow:hidden;margin:0 0 1.6rem;border:1px solid rgba(31,74,68,.1)} .qh-hero__eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:.7rem;position:relative} .qh-hero__eyebrow::before{content:"";width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232d7d74%22 stroke-width=%222%22%3E%3Cpath d=%22M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E") center/contain no-repeat} .qh-post .qh-hero__title{margin:.2rem 0 .9rem;font-weight:600;color:var(--pine-deep);line-height:1.22;max-width:26ch;font-size:1.65rem} .qh-hero p{margin:0;font-size:1.04rem;position:relative;color:var(--ink);max-width:62ch} .qh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin:1.6rem 0 0;position:relative} .qh-stat{background:#fff;border:1px solid rgba(31,74,68,.1);border-radius:12px;padding:1rem .8rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .qh-stat:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,74,68,.12);border-color:rgba(45,125,116,.5)} .qh-stat__n{font-size:1.45rem;font-weight:700;color:var(--copper);display:block;line-height:1} .qh-stat__l{font-size:.73rem;color:var(--ink);opacity:.72;text-transform:uppercase;letter-spacing:.06em;margin-top:.32rem;display:block} @media(max-width:560px){.qh-stats{grid-template-columns:1fr 1fr}.qh-stats .qh-stat:last-child{grid-column:span 2}} .qh-pin{position:absolute;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23d9a441%22 opacity=%22.6%22%3E%3Cpath d=%22M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z%22/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none;animation:qhFloat 9s ease-in-out infinite} .qh-pin--1{top:20px;right:26px} .qh-pin--2{top:56%;right:9%;width:20px;height:20px;animation-delay:1.5s} .qh-pin--3{bottom:20px;right:40%;width:16px;height:16px;animation-delay:3s;opacity:.7} @keyframes qhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .qh-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.3rem 0 1.4rem} .qh-pill{display:inline-flex;align-items:center;gap:.4rem;background:#fff;color:var(--pine-deep);border:1px solid rgba(31,74,68,.18);padding:.45rem .85rem;border-radius:999px;font-size:.82rem;font-weight:500;transition:transform .25s ease,background .25s ease,border-color .25s ease} .qh-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)} .qh-pill:hover{transform:translateY(-2px);background:var(--cream);border-color:var(--teal)} .qh-legend{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:linear-gradient(180deg,#fff,#fbf7ef);border:1px dashed rgba(31,74,68,.28);border-radius:12px;padding:.9rem 1.1rem;margin:0 0 1.4rem;font-size:.9rem;line-height:1.55} .qh-legend__ex{display:inline-flex;gap:.4rem} .qh-tier{margin:2.5rem 0 .3rem} .qh-tier__badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--teal),var(--pine));padding:.4rem .85rem;border-radius:999px} .qh-post .qh-h2{position:relative;margin:.7rem 0 .2rem;font-weight:600;color:var(--pine-deep);padding-left:1.05rem;line-height:1.25;font-size:1.45rem} .qh-post .qh-h2::before{content:"";position:absolute;left:0;top:.26em;bottom:.26em;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--sand),var(--copper))} .qh-tier__sub{color:var(--ink);opacity:.75;font-size:.94rem;margin:.15rem 0 0} .qh-card{position:relative;margin:1.5rem 0 0;padding:1.5rem 1.3rem 1.3rem;border-radius:14px;background:#fff;border:1px solid rgba(31,74,68,.1);box-shadow:0 6px 20px rgba(31,74,68,.05);transition:transform .35s ease,box-shadow .35s ease} .qh-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(31,74,68,.11)} .qh-card__num{position:absolute;top:-16px;left:16px;min-width:40px;height:40px;padding:0 .5rem;border-radius:999px;background:linear-gradient(135deg,var(--copper),var(--sand));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;box-shadow:0 6px 14px rgba(194,106,61,.35)} .qh-post .qh-card__title{margin:.5rem 0 .25rem;font-weight:600;color:var(--pine-deep);line-height:1.25;font-size:1.24rem} .qh-card__loc{font-size:.8rem;color:var(--teal);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0 0 .7rem;display:inline-flex;align-items:center;gap:.4rem} .qh-card__loc::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232d7d74%22 stroke-width=%222%22%3E%3Cpath d=%22M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E") center/contain no-repeat} .qh-card p{margin:.2rem 0 0} .qh-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:.85rem 0 .2rem} .qh-meta__chip{display:inline-flex;align-items:center;gap:.4rem;background:#f2f7f2;border:1px solid rgba(31,74,68,.12);border-radius:999px;padding:.4rem .8rem;font-size:.81rem;font-weight:600;color:var(--pine-deep)} .qh-meta__chip::before{content:"";width:15px;height:15px;background-size:contain;background-repeat:no-repeat;background-position:center} .qh-meta__chip--km::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231f4a44%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 13l2-5a2 2 0 012-1.3h10a2 2 0 012 1.3l2 5%22/%3E%3Cpath d=%22M3 13h18v4a1 1 0 01-1 1h-1a1 1 0 01-1-1v-1H6v1a1 1 0 01-1 1H4a1 1 0 01-1-1z%22/%3E%3C/svg%3E")} .qh-meta__chip--min::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231f4a44%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpolyline points=%2212 7 12 12 15 14%22/%3E%3C/svg%3E")} .qh-card__tip{margin:.85rem 0 0;padding:.7rem .9rem .7rem 2.4rem;position:relative;background:#fbf7ef;border-radius:8px;border-left:3px solid var(--sand);font-size:.87rem;line-height:1.55} .qh-card__tip::before{content:"";position:absolute;left:.8rem;top:.78rem;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c26a3d%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpolygon fill=%22%23c26a3d%22 stroke=%22none%22 points=%2215.5 8.5 10.5 10.5 8.5 15.5 13.5 13.5%22/%3E%3C/svg%3E") center/contain no-repeat} .qh-card__tip b{color:var(--copper)} .qh-divider{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:2.4rem 0} .qh-divider::before,.qh-divider::after{content:"";flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(45,125,116,.6),transparent)} .qh-divider span{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(45,125,116,.15);animation:qhPulse 3s ease-in-out infinite} .qh-divider span:nth-child(2){animation-delay:.4s;background:var(--sand)} .qh-divider span:nth-child(3){animation-delay:.8s;background:var(--copper)} @keyframes qhPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.25);opacity:1}} .qh-final{margin:2.8rem 0 0;padding:2.4rem 1.8rem 2.2rem;border-radius:18px;background:linear-gradient(135deg,var(--pine-deep) 0%,var(--pine) 60%,#0f2b27 100%);color:#fff;position:relative;overflow:hidden} .qh-final::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 14px);pointer-events:none} .qh-final::after{content:"";position:absolute;top:-30%;right:-15%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.26),transparent 70%);animation:qhGlow 8s ease-in-out infinite;pointer-events:none} @keyframes qhGlow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}} .qh-post .qh-final h3{margin:0 0 .8rem;font-weight:600;color:#fff;position:relative;font-size:1.5rem} .qh-final p{color:#e7efe6;line-height:1.7;margin:0 0 1rem;position:relative;max-width:56ch} .qh-final strong{color:var(--sand)} .qh-post .qh-final__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.85rem 1.5rem;background:var(--sand);color:var(--pine-deep);border-radius:999px;font-weight:700;text-decoration:none;position:relative;transition:transform .25s ease,box-shadow .25s ease,background .25s ease} .qh-post .qh-final__cta:hover{transform:translateY(-2px) translateX(3px);box-shadow:0 12px 26px rgba(217,164,65,.4);background:var(--copper);color:#fff} .qh-fade{opacity:0;transform:translateY(14px);animation:qhFade .9s ease forwards} .qh-fade:nth-of-type(2){animation-delay:.06s} .qh-fade:nth-of-type(3){animation-delay:.12s} @keyframes qhFade{to{opacity:1;transform:none}} /* Fallback: si por algún motivo el CSS no cargó, que igual se lea todo el texto (evita quedar con opacity:0 de la animación de entrada). */ @media (prefers-reduced-motion: reduce){.qh-fade{opacity:1;transform:none;animation:none}}