Preview de mixed.css
/* MIXED CSS PACK */
/* Template: turismodipas.com/index.php */
/* Template mtime: 2026-02-03 20:32:43 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
/* Dorado principal */
--primary:#d1a93b;
--primary-600:#b88b2f;
--primary-700:#8c6a24;
/* Restos neutros (no toques nada de funcional) */
--dark:#1e293b;
--muted:#64748b;
--line:#e2e8f0;
--bg:#f8fafc;
--radius:14px;
--shadow:0 6px 18px rgba(2,8,23,.08);
--shadow-lg:0 14px 32px rgba(2,8,23,.15);
/* Degradado dorado para el buscador y bloques */
--grad:linear-gradient(135deg, #1a1a1f 0%, #d1a93b 45%, #f5cf5b 100%);
/* Extras para el buscador premium (AHORA DORADO) */
--primary-light:#f0d889;
--primary-dark:#8c6a24;
--accent:#d1a93b;
--accent-light:#f5cf5b;
--secondary:#f1e4b0;
--dark-800:#0f172a;
--dark-700:#334155;
--light:#f1f5f9;
--white:#ffffff;
--success:#10b981;
--shadow-sm:0 2px 8px rgba(15,23,42,0.04);
--shadow-xl:0 32px 64px rgba(15,23,42,0.16);
/* estos eran violetas, los pasamos a dorado */
--gradient-primary: linear-gradient(135deg, #b88b2f 0%, #f5cf5b 100%);
--gradient-hero: linear-gradient(135deg, #1a1a1f 0%, #d1a93b 40%, #f5cf5b 100%);
--blur: blur(20px);
} /* <-- ESTA LLAVE FALTABA (te rompía CSS) */
*{box-sizing:border-box}
body{
font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
color:var(--dark);
background:#fff;
line-height:1.6;
overflow-x:hidden
}
h1,h2,h3,h4{font-family:'Playfair Display',serif}
/* === HERO carrusel sin estirar === */
.hero{
min-height:48vh;
position:relative;
display:grid;
place-items:center;
overflow:hidden;
isolation:isolate;
background:none !important;
}
.hero__slides{ position:absolute; inset:0; z-index:0; }
.hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.hero__slide.is-active{ opacity:1; }
.hero__img{
width:100%;
height:100%;
display:block;
object-fit:cover;
background:transparent;
}
.hero--contain .hero__img{
width:100%;
height:100%;
display:block;
object-fit:contain;
background:transparent;
}
.hero::after{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 40%, rgba(0,0,0,.55));
}
.hero-inner{ position:relative; z-index:2; text-align:center; color:#fff; padding:2.6rem 1rem; }
@media (max-width:992px){
.hero{ min-height:36vh; }
}
/* === HERO / BUSCADOR PREMIUM (traído de buscador.php) === */
.search-hero {
position: relative;
background: var(--gradient-hero);
padding: 5rem 0 4rem;
overflow: hidden;
margin-bottom: 0;
}
.search-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.search-hero::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(180deg, transparent 0%, #ffffff 100%);
pointer-events: none;
}
.search-hero-content {
position: relative;
z-index: 2;
}
.search-hero h1 {
color: var(--white);
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: fadeInUp 0.8s ease-out;
}
.search-hero p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.2rem;
margin-bottom: 3rem;
font-weight: 400;
animation: fadeInUp 0.8s ease-out 0.2s backwards;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.search-card {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: var(--blur);
border-radius: 24px;
padding: 2.5rem;
box-shadow: var(--shadow-xl);
border: 1px solid rgba(255, 255, 255, 0.8);
animation: scaleIn 0.8s ease-out 0.4s backwards;
position: relative;
z-index: 3;
}
.search-card::before {
content: '';
position: absolute;
inset: -2px;
background: var(--gradient-primary);
border-radius: 24px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.search-card:hover::before { opacity: 0.1; }
.search-card .form-label {
color: var(--dark);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.625rem;
display: block;
}
.search-card .form-select,
.search-card .form-control {
border: 2px solid #e2e8f0;
border-radius: 14px;
padding: 0.875rem 1.125rem;
font-size: 1rem;
font-weight: 500;
background: var(--white);
color: var(--dark);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
}
.search-card .form-select:focus,
.search-card .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(143, 130, 174, 0.1), var(--shadow);
outline: none;
transform: translateY(-2px);
}
.search-card .form-select:hover,
.search-card .form-control:hover {
border-color: var(--primary-light);
box-shadow: var(--shadow);
}
.btn-search {
background: var(--gradient-primary);
border: none;
border-radius: 14px;
padding: 0.875rem 2rem;
font-weight: 700;
font-size: 1rem;
color: var(--white);
box-shadow: var(--shadow-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.btn-search::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.btn-search:hover::before { left: 100%; }
.btn-search:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.btn-search:active { transform: translateY(-1px); }
.btn-search i { font-size: 1.25rem; }
@media (max-width: 768px) {
.search-hero { padding: 3rem 0 3rem; }
.search-hero h1 { font-size: 2rem; }
.search-hero p { font-size: 1rem; }
.search-card { padding: 1.5rem; }
}
/* SECCIONES Y CARDS (resto del index) */
.section{padding: clamp(2rem, 5vw, 5rem) 0}
.section-title{position:relative;display:inline-block;margin-bottom:1rem}
.section-title::after{content:'';position:absolute;left:0;bottom:-10px;width:72px;height:4px;background:var(--primary);border-radius:2px}
.lead-muted{color:var(--muted)}
.img-elev{border-radius:var(--radius);box-shadow:var(--shadow-lg);object-fit:cover}
.img-cover{min-height:320px;border-radius:16px;box-shadow:var(--shadow-lg);background:var(--grad);background-size:cover;background-position:center}
.prop-card{border:none;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:.28s;height:100%}
.prop-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.prop-img-wrap{height:220px;overflow:hidden;position:relative}
.prop-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.prop-card:hover .prop-img{transform:scale(1.06)}
.prop-type{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.95);color:var(--primary-700);padding:.3rem .7rem;border-radius:999px;font-weight:700;font-size:.8rem;border:1px solid var(--line)}
.prop-body{padding:1rem 1.1rem 1.2rem}
.prop-title{font-weight:700;color:#0f172a;font-size:1.05rem;margin:0}
.prop-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.65rem;font-weight:600;color:var(--primary)}
.prop-link:hover{color:var(--primary-600)}
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.2rem}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;font-weight:600;color:var(--muted);box-shadow:var(--shadow);cursor:pointer}
.chip.active,.chip:hover{background:var(--primary);color:#fff;border-color:transparent}
.list-thumb{width:110px;height:74px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.cta-pane{background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.92)), var(--grad);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.4rem}
/* WHATSAPP widget (corregido) */
:root{
--whatsapp-green:#25D366;--whatsapp-dark:#075E54;--whatsapp-light:#DCF8C6;
--w-text:#4A4A4A;--w-muted:#757575;--w-bg:#FFFFFF;--w-gray:#F0F0F0
}
.whatsapp-chat-container{
position:fixed;bottom:22px;right:22px;
z-index:2147483647;
font-family:'Segoe UI',Helvetica,Arial,sans-serif
}
.whatsapp-closed{position:relative;transition:.3s}
.chat-button{
display:flex;align-items:center;justify-content:center;
width:58px;height:58px;border-radius:50%;
background:var(--whatsapp-green);
box-shadow:0 5px 15px rgba(37,211,102,.4);
color:#fff;font-size:28px;position:relative;cursor:pointer;transition:.3s
}
.notification-badge{
position:absolute;top:-5px;right:-5px;background:#FF3B30;color:#fff;border-radius:50%;
width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700
}
.chat-tooltip{
position:absolute;right:80px;top:50%;transform:translateY(-50%);
background:var(--w-bg);color:var(--w-text);width:240px;border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.1);opacity:0;visibility:hidden;transition:.3s;overflow:hidden;z-index:1
}
.whatsapp-closed:hover .chat-tooltip{opacity:1;visibility:visible;right:72px}
.whatsapp-open{
width:300px;background:var(--w-bg);border-radius:10px;
box-shadow:0 5px 30px rgba(0,0,0,.2);overflow:hidden;
display:none;flex-direction:column;height:450px
}
.whatsapp-open .chat-header{background:var(--whatsapp-dark)}
.whatsapp-chat-container.chat-visible .whatsapp-open{display:flex}
.whatsapp-chat-container.chat-visible .whatsapp-closed{display:none}
.whatsapp-chat-container.chat-visible .chat-tooltip{display:none}
.chat-header{
display:flex;align-items:center;padding:12px;background:var(--whatsapp-dark);color:#fff;position:relative
}
.close-chat{background:none;border:none;color:#fff;cursor:pointer;font-size:16px;opacity:.8}
.chat-avatar{width:40px;height:40px;border-radius:50%;margin-right:10px;object-fit:cover}
.chat-info{flex:1}
.chat-info strong{display:block;font-size:14px}
.chat-info small{font-size:11px;opacity:.8}
.chat-preview{padding:12px;font-size:13px;border-bottom:1px solid var(--w-gray)}
.chat-messages{flex:1;padding:10px;overflow-y:auto;background:#e5ddd5}
.message{display:flex;margin-bottom:10px;max-width:80%}
.message-content{padding:8px 12px;border-radius:7.5px;font-size:14px}
.message.received .message-content{background:#fff;color:var(--w-text);border-top-left-radius:0}
.message.sent{align-self:flex-end;flex-direction:row-reverse}
.message.sent .message-content{background:var(--whatsapp-light);color:var(--w-text);border-top-right-radius:0}
.chat-input{display:flex;padding:10px;background:var(--w-gray);border-top:1px solid #ddd}
.chat-input input{flex:1;border:none;border-radius:20px;padding:10px 15px;font-size:14px;outline:none;background:#fff}
.send-button{width:40px;height:40px;border-radius:50%;background:var(--whatsapp-green);color:#fff;border:none;margin-left:10px;cursor:pointer}
@media (max-width:576px){
.brand-img{height:22px}
.brand-text{max-width:54vw;font-size:13.5px}
.navbar-toggler{padding:.2rem .45rem}
.hero{min-height:36vh;background-attachment:scroll}
.section{padding:1.8rem 0}
.prop-img-wrap{height:170px}
.whatsapp-chat-container{bottom:12px;right:12px}
.chat-button{width:46px;height:46px;font-size:22px}
.notification-badge{width:16px;height:16px;font-size:9px}
.chat-tooltip{display:none}
}
.img-cover2{
background-image: url('img/dipasequipo.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100%;
aspect-ratio: 4 / 3;
}
/* ===== INLINE <style> BLOCK #2 ===== */
:root{
/* Accent solo modal */
--dps-accent:#d4ad44;
--dps-accent-dark:#b89232;
--dps-bg:#ffffff;
--dps-border:#e9ecef;
/* WhatsApp oficial (solo botón WA) */
--wa:#25D366;
--wa-dark:#128C7E;
}
/* Stack flotantes */
.dps-floats{
position:fixed;
right:18px;
bottom:18px;
z-index:9999;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
font-family:inherit;
}
.dps-float{
width:56px;height:56px;border-radius:50%;
border:0;
display:grid; place-items:center;
color:#fff;
cursor:pointer;
text-decoration:none;
box-shadow:0 10px 30px rgba(0,0,0,.18);
transition:transform .25s ease, box-shadow .25s ease;
}
.dps-float:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:0 14px 40px rgba(0,0,0,.22);
}
/* Instagram */
.dps-ig{
background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}
/* Facebook */
.dps-fb{
background:linear-gradient(135deg,#1877f2,#0f5dc4);
}
/* WhatsApp OFICIAL */
.dps-wa-btn{
background:linear-gradient(135deg,var(--wa),var(--wa-dark));
box-shadow:0 12px 34px rgba(37,211,102,.45);
}
.dps-wa-btn:hover{
box-shadow:0 16px 44px rgba(37,211,102,.55);
}
/* Overlay para cerrar modal WA */
.dps-wa-overlay{
position:fixed;
inset:0;
background:transparent;
border:0;
cursor:default;
z-index:9998;
}
/* Card WA */
.dps-wa-card{
position:absolute;
right:0;
bottom:74px; /* arriba del botón WA */
width:min(370px,92vw);
background:var(--dps-bg);
border-radius:18px;
border:1px solid var(--dps-border);
box-shadow:0 20px 70px rgba(0,0,0,.28);
overflow:hidden;
transform:translateY(10px);
opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.dps-wa-card[aria-modal="true"]{
transform:none;
opacity:1;
pointer-events:auto;
}
/* Header con accent */
.dps-wa-head{
display:flex;
align-items:center;
gap:12px;
padding:14px;
color:#0b0f18;
background:
radial-gradient(1200px 220px at 10% 0%, rgba(255,255,255,.55), transparent 60%),
linear-gradient(135deg, rgba(212,173,68,.95), rgba(184,146,50,.95));
}
.dps-wa-avatar{
width:42px;height:42px;
background:rgba(255,255,255,.92);
border-radius:12px;
display:grid; place-items:center;
box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.dps-wa-title{ font-weight:800; letter-spacing:-.2px; }
.dps-wa-status{ font-size:.85rem; opacity:.9; }
.dps-wa-close{
margin-left:auto;
border:0;
background:rgba(255,255,255,.28);
width:34px;height:34px;
border-radius:12px;
cursor:pointer;
font-size:22px;
line-height:1;
display:grid; place-items:center;
transition:transform .2s ease, background .2s ease;
}
.dps-wa-close:hover{ transform:scale(1.05); background:rgba(255,255,255,.38); }
.dps-wa-body{
padding:14px;
max-height:42vh;
overflow:auto;
background:#f8f9fa;
display:flex;
flex-direction:column;
gap:8px;
}
.dps-wa-bubble{
max-width:88%;
padding:10px 12px;
border-radius:14px;
font-size:.95rem;
box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.dps-wa-bot{
background:#fff;
border:1px solid var(--dps-border);
align-self:flex-start;
}
.dps-wa-user{
background:rgba(212,173,68,.14);
border:1px solid rgba(212,173,68,.30);
align-self:flex-end;
}
.dps-wa-compose{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
padding:10px;
border-top:1px solid var(--dps-border);
background:#fff;
}
.dps-wa-compose textarea{
resize:none;
border-radius:12px;
padding:10px;
border:1px solid var(--dps-border);
font-family:inherit;
outline:none;
}
.dps-wa-compose textarea:focus{
border-color:rgba(212,173,68,.55);
box-shadow:0 0 0 4px rgba(212,173,68,.18);
}
.dps-wa-send{
border:0;
border-radius:12px;
padding:0 16px;
cursor:pointer;
color:#0b0f18;
background:linear-gradient(135deg,var(--dps-accent),var(--dps-accent-dark));
transition:transform .2s ease, filter .2s ease;
}
.dps-wa-send:hover{ transform:translateY(-1px); filter:saturate(1.05); }
@media (max-width:480px){
.dps-floats{ right:14px; bottom:14px; }
.dps-wa-card{ width:calc(100vw - 24px); }
}