Preview de mixed.css
/* MIXED CSS PACK */
/* Template: pañalerabebefinn.com.ar/index.html */
/* Template mtime: 2026-04-13 14:08:14 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500&display=swap */
/* ===== INLINE <style> BLOCK #1 ===== */
:root{
--accent:#f525a1;
--accent-dark:#c91885;
--accent-2:#88d9f8;
--accent-2-dark:#5bbde0;
--ink:#0d0d0d;
--muted:#5a6270;
--bg:#ffffff;
--soft:#f8f9fd;
--softer:#f0f4fc;
--radius:20px;
--radius-lg:28px;
--radius-xl:36px;
--shadow:0 20px 60px rgba(0,0,0,.09);
--shadow-sm:0 8px 24px rgba(0,0,0,.07);
--shadow-accent:0 16px 48px rgba(245,37,161,.22);
--shadow-blue:0 16px 48px rgba(136,217,248,.30);
--ring:0 0 0 3px rgba(245,37,161,.18);
--container:1160px;
--font-head:'Plus Jakarta Sans', sans-serif;
--font-body:'DM Sans', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.container { max-width: var(--container); }
.section { padding: 96px 0; }
@media(max-width:991.98px){ .section { padding: 72px 0; } }
@media(max-width:575.98px){ .section { padding: 60px 0; } }
.section.soft {
background: linear-gradient(160deg, rgba(136,217,248,.12) 0%, rgba(245,37,161,.06) 60%, rgba(248,249,253,1) 100%);
position: relative;
}
.section.soft::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f525a1' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.section-title {
font-family: var(--font-head);
font-weight: 900;
letter-spacing: -.03em;
line-height: 1.05;
color: var(--ink);
}
.section-subtitle { color: var(--muted); max-width: 640px; margin: 14px auto 0; font-size: 1.05rem; line-height: 1.65; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-head);
font-weight: 700;
font-size: .82rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
background: linear-gradient(135deg, rgba(245,37,161,.12), rgba(136,217,248,.12));
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(245,37,161,.18);
}
.eyebrow::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
display: block;
flex-shrink: 0;
}
/* ── NAVBAR ── */
.navbar {
background: rgba(255,255,255,.88);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid rgba(0,0,0,.05);
transition: box-shadow .3s;
padding: 14px 0;
}
.navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.navbar-brand {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-head);
font-weight: 900;
letter-spacing: -.02em;
color: var(--ink);
text-decoration: none;
}
.brand-logo { height: 44px; width: auto; display: block; }
.brand-text { font-size: 1rem; line-height: 1.1; }
@media(max-width:575.98px){ .brand-logo { height: 40px; } .brand-text { font-size: .9rem; } }
.nav-link {
font-family: var(--font-head);
color: var(--ink) !important;
font-weight: 600;
font-size: .92rem;
opacity: .75;
padding: 8px 12px !important;
border-radius: 10px;
transition: opacity .2s, background .2s;
}
.nav-link:hover { opacity: 1; background: rgba(0,0,0,.04); }
.nav-link:focus { box-shadow: var(--ring); outline: none; }
.btn-accent {
font-family: var(--font-head);
font-weight: 800;
font-size: .9rem;
background: linear-gradient(135deg, var(--accent), #d4199c);
border: none;
color: #fff !important;
padding: 11px 22px;
border-radius: 999px;
box-shadow: var(--shadow-accent);
transition: transform .2s, box-shadow .2s, filter .2s;
letter-spacing: -.01em;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 20px 56px rgba(245,37,161,.30); filter: brightness(1.05); }
.btn-outline-ink {
font-family: var(--font-head);
font-weight: 700;
font-size: .9rem;
background: transparent;
border: 1.5px solid rgba(0,0,0,.18);
color: var(--ink) !important;
padding: 10px 22px;
border-radius: 999px;
transition: border-color .2s, background .2s, transform .2s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-outline-ink:hover { border-color: var(--ink); background: rgba(0,0,0,.04); transform: translateY(-1px); }
/* ── HERO ── */
.hero {
padding-top: 112px;
padding-bottom: 96px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(136,217,248,.25) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.hero::after {
content: '';
position: absolute;
bottom: -150px; left: -150px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(245,37,161,.12) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
@media(max-width:991.98px){ .hero { padding-top: 100px; } }
.hero-card {
border-radius: var(--radius-xl);
background: #fff;
box-shadow: var(--shadow);
border: 1px solid rgba(0,0,0,.06);
overflow: hidden;
position: relative;
}
.hero-copy { padding: 52px 48px; }
@media(max-width:991.98px){ .hero-copy { padding: 40px 32px; } }
@media(max-width:575.98px){ .hero-copy { padding: 32px 24px; } }
.hero-title {
font-family: var(--font-head);
font-weight: 900;
letter-spacing: -.04em;
line-height: 1.02;
font-size: clamp(2.2rem, 3.5vw, 3.4rem);
margin: 16px 0 14px;
background: linear-gradient(135deg, var(--ink) 0%, #2d2d2d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-lead {
color: var(--muted);
font-size: 1.08rem;
line-height: 1.7;
margin: 0 0 24px;
max-width: 50ch;
}
.hero-bullets {
display: grid;
gap: 12px;
margin: 22px 0 30px;
padding: 0;
list-style: none;
}
.hero-bullets li {
display: flex;
gap: 12px;
align-items: center;
font-family: var(--font-head);
font-weight: 600;
font-size: .96rem;
}
.tick {
flex: 0 0 auto;
width: 22px; height: 22px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(136,217,248,.4), rgba(136,217,248,.2));
border: 1px solid rgba(136,217,248,.5);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.tick:after {
content: "";
position: absolute;
left: 7px; top: 4px;
width: 6px; height: 10px;
border: 2px solid #111;
border-top: 0; border-left: 0;
transform: rotate(45deg);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-head);
font-size: .78rem;
font-weight: 700;
color: var(--muted);
background: var(--soft);
border: 1px solid rgba(0,0,0,.07);
padding: 6px 12px;
border-radius: 999px;
margin-top: 18px;
}
.hero-badge span { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.hero-media {
min-height: 420px;
background: linear-gradient(160deg, rgba(136,217,248,.28) 0%, rgba(245,37,161,.15) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
position: relative;
overflow: hidden;
}
.hero-media::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 250px; height: 250px;
background: rgba(245,37,161,.1);
border-radius: 50%;
}
.hero-media::after {
content: '';
position: absolute;
bottom: -40px; left: -40px;
width: 180px; height: 180px;
background: rgba(136,217,248,.15);
border-radius: 50%;
}
.hero-img {
width: 100%;
max-height: 480px;
object-fit: contain;
display: block;
border-radius: 20px;
background: #fff;
box-shadow: var(--shadow);
border: 1px solid rgba(255,255,255,.9);
padding: 12px;
position: relative;
z-index: 1;
transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.hero-img:hover { transform: scale(1.02) translateY(-4px); }
/* ── STATS STRIP ── */
.stats-strip {
padding: 40px 0;
background: var(--ink);
position: relative;
overflow: hidden;
}
.stats-strip::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(136,217,248,.08), rgba(245,37,161,.08));
}
.stat-item {
text-align: center;
padding: 12px 24px;
position: relative;
}
.stat-item + .stat-item::before {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 1px;
background: rgba(255,255,255,.12);
}
.stat-number {
font-family: var(--font-head);
font-weight: 900;
font-size: clamp(2rem, 3vw, 2.8rem);
letter-spacing: -.04em;
line-height: 1;
background: linear-gradient(135deg, #fff, rgba(136,217,248,.9));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-family: var(--font-head);
font-size: .82rem;
font-weight: 600;
color: rgba(255,255,255,.55);
letter-spacing: .04em;
text-transform: uppercase;
margin-top: 4px;
}
/* ── SPLIT CARDS ── */
.split-card {
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 36px;
height: 100%;
transition: box-shadow .3s, transform .3s;
}
.split-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.split-card p { color: var(--muted); line-height: 1.75; font-size: .97rem; }
@media(max-width:575.98px){ .split-card { padding: 24px; } }
/* ── SERVICE GRID ── */
.service-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
margin-top: 20px;
}
@media(max-width:575.98px){ .service-grid { grid-template-columns: 1fr; } }
.service-item {
border-radius: 16px;
padding: 16px 18px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(160deg, rgba(136,217,248,.1), rgba(255,255,255,0));
font-family: var(--font-head);
font-weight: 700;
font-size: .9rem;
display: flex;
align-items: center;
gap: 10px;
transition: border-color .2s, background .2s, transform .2s;
}
.service-item:hover { border-color: rgba(136,217,248,.4); background: rgba(136,217,248,.12); transform: translateX(3px); }
.service-item::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
flex-shrink: 0;
}
/* ── WHY CARDS ── */
.why-card {
height: 100%;
border-radius: var(--radius);
border: 1px solid rgba(0,0,0,.06);
box-shadow: var(--shadow-sm);
background: #fff;
padding: 28px;
transition: box-shadow .3s, transform .3s, border-color .3s;
position: relative;
overflow: hidden;
}
.why-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
opacity: 0;
transition: opacity .3s;
}
.why-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); border-color: rgba(245,37,161,.15); }
.why-card:hover::before { opacity: 1; }
.why-icon {
width: 52px; height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(245,37,161,.12), rgba(136,217,248,.12));
border: 1px solid rgba(245,37,161,.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: transform .3s, box-shadow .3s;
}
.why-card:hover .why-icon { transform: scale(1.1) rotate(-3deg); box-shadow: 0 8px 24px rgba(245,37,161,.18); }
.why-card h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.why-card p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }
/* ── FAQ ── */
.faq-wrap { max-width: 860px; margin: 0 auto; }
.accordion-item {
border: 1px solid rgba(0,0,0,.07) !important;
border-radius: var(--radius) !important;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow .3s;
}
.accordion-item:hover { box-shadow: var(--shadow); }
.accordion-button {
font-family: var(--font-head);
font-weight: 800;
font-size: 1rem;
padding: 22px 24px;
background: #fff;
color: var(--ink);
letter-spacing: -.01em;
}
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f525a1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f525a1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}
.accordion-button:focus { box-shadow: var(--ring); outline: none; }
.accordion-button:not(.collapsed) {
color: var(--ink);
background: linear-gradient(135deg, rgba(136,217,248,.1), rgba(245,37,161,.06));
box-shadow: none;
}
.accordion-body { padding: 0 24px 22px; color: var(--muted); line-height: 1.7; font-size: .97rem; }
/* ── CONTACT ── */
.contact-card {
border-radius: var(--radius-lg);
border: 1px solid rgba(0,0,0,.06);
box-shadow: var(--shadow);
background: #fff;
padding: 36px;
}
@media(max-width:575.98px){ .contact-card { padding: 24px; } }
.contact-list { display: grid; gap: 12px; margin-top: 16px; }
.contact-pill {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,.07);
background: linear-gradient(135deg, rgba(245,37,161,.05), rgba(136,217,248,.05));
transition: border-color .2s, background .2s, transform .2s;
}
.contact-pill:hover { border-color: rgba(245,37,161,.25); background: linear-gradient(135deg, rgba(245,37,161,.09), rgba(136,217,248,.09)); transform: translateX(4px); }
.contact-pill-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(245,37,161,.15), rgba(136,217,248,.15));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-pill-info { flex: 1; min-width: 0; }
.contact-pill-label { font-size: .76rem; font-family: var(--font-head); font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.contact-pill a { color: var(--ink); font-family: var(--font-head); font-weight: 700; text-decoration: none; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.contact-pill a:hover { color: var(--accent); }
.form-control, .form-select {
border-radius: 14px;
padding: 13px 16px;
border: 1.5px solid rgba(0,0,0,.12);
font-family: var(--font-body);
font-size: .95rem;
background: var(--soft);
transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control:focus, .form-select:focus {
box-shadow: var(--ring);
border-color: rgba(245,37,161,.5);
background: #fff;
outline: none;
}
.form-label { font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--ink); margin-bottom: 8px; }
/* ── GALLERY ── */
.gal-gallery .carousel { max-width: 900px; margin-inline: auto; position: relative; }
.gal-frame {
height: clamp(240px, 50vh, 480px);
background: #fff;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid rgba(0,0,0,.06);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
}
.gal-img {
width: auto !important;
max-width: 100%;
height: auto !important;
max-height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
cursor: zoom-in;
border-radius: 16px;
}
.gal-gallery .carousel-control-prev,
.gal-gallery .carousel-control-next {
z-index: 20;
width: 52px; height: 52px;
top: 50%; transform: translateY(-50%);
opacity: 1;
background: rgba(255,255,255,.92);
border-radius: 50%;
margin: 0 -16px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
border: 1px solid rgba(0,0,0,.07);
transition: background .2s, transform .2s;
}
.gal-gallery .carousel-control-prev:hover,
.gal-gallery .carousel-control-next:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.gal-gallery .carousel-control-prev { left: 0; }
.gal-gallery .carousel-control-next { right: 0; }
.gal-gallery .carousel-control-prev-icon,
.gal-gallery .carousel-control-next-icon {
background-image: none;
display: flex;
align-items: center;
justify-content: center;
}
.gal-gallery .carousel-control-prev-icon::after {
content: '‹';
font-size: 24px;
color: var(--ink);
line-height: 1;
}
.gal-gallery .carousel-control-next-icon::after {
content: '›';
font-size: 24px;
color: var(--ink);
line-height: 1;
}
.gal-gallery .carousel-indicators { z-index: 10; bottom: -52px; }
.gal-gallery .carousel-indicators button {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(0,0,0,.18);
border: none;
transition: background .2s, transform .2s;
}
.gal-gallery .carousel-indicators button.active {
background: var(--accent);
transform: scale(1.3);
}
.gal-gallery { padding-bottom: 64px; }
#galLightbox .modal-content { background: #000; border-radius: 20px; overflow: hidden; }
#galLightboxImg { max-height: 86vh; width: 100%; height: auto; object-fit: contain; background: #000; }
.gal-lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%);
border: 0; width: 48px; height: 48px; border-radius: 999px;
background: rgba(255,255,255,.15); color: #fff; font-size: 28px;
line-height: 48px; text-align: center; z-index: 5; cursor: pointer;
transition: background .2s;
}
.gal-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.gal-lightbox-nav.gal-prev { left: 12px; }
.gal-lightbox-nav.gal-next { right: 12px; }
@media(max-width:575.98px){ .gal-frame { height: clamp(200px, 42vh, 360px); } }
/* ── FOOTER ── */
.footer {
background: linear-gradient(160deg, #e01893 0%, var(--accent) 40%, #c0108a 100%);
color: #fff;
padding: 72px 0 24px;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: rgba(255,255,255,.06);
border-radius: 50%;
}
.footer::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 250px; height: 250px;
background: rgba(0,0,0,.08);
border-radius: 50%;
}
.footer a { color: rgba(255,255,255,.88); text-decoration: none; transition: color .2s; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-top { padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.18); }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.footer-logo { height: 44px; width: auto; display: block; }
.footer-brand span { font-family: var(--font-head); font-size: .95rem; font-weight: 800; line-height: 1.1; }
.footer h6 { font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; margin-bottom: 16px; color: #fff; font-size: .9rem; text-transform: uppercase; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul li a { font-size: .93rem; }
.footer small { color: rgba(255,255,255,.75); font-size: .82rem; }
.footer-bottom {
padding-top: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.footer-social {
display: flex;
gap: 10px;
margin-top: 16px;
}
.footer-social a {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.15);
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, transform .2s;
border: 1px solid rgba(255,255,255,.2);
}
.footer-social a:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); text-decoration: none; }
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.anim { opacity: 0; animation: fadeUp .6s ease forwards; }
.anim-d1 { animation-delay: .1s; }
.anim-d2 { animation-delay: .2s; }
.anim-d3 { animation-delay: .3s; }
.anim-d4 { animation-delay: .4s; }
.anim-d5 { animation-delay: .5s; }
/* ── SECTION DIVIDER ── */
.divider {
width: 56px; height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 999px;
margin: 16px auto 0;
}
/* ================== FIX: Mobile only (no impact on desktop) ================== */
@media (max-width: 991.98px){
html, body{ overflow-x: hidden !important; }
img, video, svg, canvas{
max-width: 100% !important;
height: auto;
}
.container, .container-fluid{ overflow-x: clip; }
.carousel-control-prev, .carousel-control-next{
width: 3.25rem;
}
.carousel-control-prev{ left: 0; }
.carousel-control-next{ right: 0; }
#wa-chat, #waChat, .wa-chat, .wa-card, .wa-panel, #wa-panel, #waPanel, #wa-float .wa-card{
left: 12px !important;
right: 12px !important;
width: auto !important;
max-width: calc(100% - 24px) !important;
box-sizing: border-box !important;
}
}
/* ================== END FIX ================== */
/* ===== INLINE <style> BLOCK #2 ===== */
.embed-bottom-cta{
display:flex;
justify-content:center;
margin-top:18px;
}
@media (max-width: 575.98px){
.embed-bottom-cta{
margin-top:14px;
}
.embed-bottom-cta .embed-open-btn{
width:100%;
max-width:320px;
}
}
.section-embed-tienda{
padding: 80px 0;
}
.embed-toolbar{
display:flex;
justify-content:center;
margin:0 0 18px;
}
.embed-open-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
min-height:52px;
padding:0 22px;
border-radius:999px;
background:linear-gradient(135deg,var(--accent),var(--accent-dark));
color:#fff;
text-decoration:none;
font-weight:800;
font-family:var(--font-head);
box-shadow:0 12px 28px rgba(245,37,161,.22);
transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.embed-open-btn:hover{
color:#fff;
transform:translateY(-1px);
box-shadow:0 16px 32px rgba(245,37,161,.28);
}
.embed-frame-wrap{
width:100%;
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:0 18px 50px rgba(0,0,0,.10);
border:1px solid rgba(0,0,0,.08);
position:relative;
}
.embed-frame-wrap iframe{
display:block;
width:100%;
height:9000px; /* fallback inicial */
border:0;
background:#fff;
}
@media (max-width: 991.98px){
.section-embed-tienda{
padding:64px 0;
}
.embed-frame-wrap{
border-radius:18px;
}
.embed-frame-wrap iframe{
height:18000px; /* fallback phone */
}
}
@media (max-width: 575.98px){
.embed-toolbar{
margin-bottom:14px;
}
.embed-open-btn{
width:100%;
max-width:320px;
min-height:50px;
padding:0 18px;
font-size:.95rem;
}
.embed-frame-wrap{
border-radius:16px;
}
.embed-frame-wrap iframe{
height:22000px; /* fallback más alto */
}
}
/* ===== INLINE <style> BLOCK #3 ===== */
.fb-float{
position:fixed; right:18px; bottom:166px; z-index:9997;
width:54px; height:54px; border-radius:50%;
display:grid; place-items:center; color:#fff; text-decoration:none;
background:linear-gradient(180deg,#1877F2 0%,#0f63d6 100%);
box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:transform .25s, box-shadow .25s;
}
.fb-float:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.35)}
.ig-float{
position:fixed; right:18px; bottom:92px; z-index:9998;
width:54px; height:54px; border-radius:50%;
display:grid; place-items:center; color:#fff; text-decoration:none;
background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
box-shadow:0 10px 30px rgba(0,0,0,.25);
transition:transform .25s, box-shadow .25s;
}
.ig-float:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.35)}
@media (max-width:480px){
.fb-float{right:12px; bottom:160px; width:52px; height:52px}
.ig-float{right:12px; bottom:86px; width:52px; height:52px}
}
/* ===== INLINE <style> BLOCK #4 ===== */
:root{
--wa:#25D366;
--wa-dark:#1fb85a;
--light-bg:#ffffff;
--light-bg-soft:#f6f8f7;
--light-border:#dde4df;
--dark-text:#1c1f1d;
--muted-text:#6c756f;
}
.wa-float-bf{position:fixed; right:18px; bottom:18px; z-index:9999; font-family:inherit}
.wa-btn-bf{
background:var(--wa); color:#fff; border:0;
width:60px; height:60px; border-radius:50%;
display:grid; place-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.22);
cursor:pointer; transition:transform .3s, box-shadow .3s;
}
.wa-btn-bf:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.28)}
.wa-card-bf{
position:absolute; right:0; bottom:74px; width:min(360px,92vw);
background:var(--light-bg); color:var(--dark-text);
border-radius:18px; overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.25);
border:1px solid var(--light-border);
transform:translateY(10px); opacity:0;
transition:transform .3s, opacity .3s;
z-index:10000;
}
.wa-card-bf[aria-modal="true"]{transform:translateY(0); opacity:1}
.wa-head-bf{
display:flex; align-items:center; gap:12px;
padding:14px 16px;
background:linear-gradient(135deg, #ffffff, #ecf6f0);
border-bottom:1px solid var(--light-border);
}
.wa-avatar-bf{
width:40px; height:40px; border-radius:10px;
background:#e9f7ef; display:grid; place-items:center;
border:1px solid #cfeeda; overflow:hidden;
}
.wa-title-bf{font-weight:800; font-size:1.02rem}
.wa-status-bf{
font-size:.85rem; color:var(--muted-text);
display:flex; align-items:center; gap:6px;
}
.wa-status-bf::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--wa)}
.wa-close-bf{
margin-left:auto; background:transparent; color:var(--muted-text);
border:0; font-size:24px; cursor:pointer; opacity:.75;
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.wa-close-bf:hover{opacity:1; background:rgba(0,0,0,.04)}
.wa-body-bf{
padding:12px 14px; max-height:40vh; overflow:auto;
background:var(--light-bg-soft);
display:flex; flex-direction:column; gap:8px;
}
.wa-bubble-bf{
max-width:88%; padding:9px 11px; border-radius:14px;
line-height:1.35; box-shadow:0 3px 10px rgba(0,0,0,.06);
font-size:.9rem;
}
.wa-bot-bf{background:#fff; border:1px solid var(--light-border); align-self:flex-start; border-bottom-left-radius:4px}
.wa-user-bf{background:var(--wa); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.wa-compose-bf{
display:grid; grid-template-columns:1fr auto; gap:8px;
padding:10px 12px; background:#fff;
border-top:1px solid var(--light-border);
}
.wa-compose-bf textarea{
resize:none; border-radius:12px; padding:10px 12px;
border:1px solid var(--light-border); background:#f9fbfa;
color:var(--dark-text); outline:none; min-height:44px;
font-family:inherit; font-size:.9rem;
}
.wa-compose-bf textarea:focus{
border-color:var(--wa);
box-shadow:0 0 0 2px rgba(37,211,102,.15);
background:#fff;
}
.wa-send-bf{
background:var(--wa); color:#fff; border:0; border-radius:12px;
padding:0 16px; font-weight:700; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:.2s;
}
.wa-send-bf:hover{background:var(--wa-dark); transform:scale(1.04)}
@media (max-width:480px){
.wa-float-bf{right:12px; bottom:12px}
.wa-card-bf{width:calc(100vw - 24px); right:0}
}