/* =====================================================================
   Instituto de Rehabilitación — Rediseño estilo "color-block" (Thompson)
   Paleta: azul índigo + morado (sin naranja)
   Cargar DESPUÉS de style.css para que gane en la cascada.
   ===================================================================== */

:root {
    --re-purple:    #6C3FA0;
    --re-purple-d:  #57318A;
    --re-blue:      #2B2E83;
    --re-blue-d:    #20225F;
    --re-dark:      #16143A;
    --re-accent:    #B39DDB;
    --re-light:     #F5F3FA;
    --re-line:      #E7E2F2;
    --re-text:      #211E3B;
    --re-muted:     #6B6785;
    --re-radius:    14px;
}

/* ---------- Base ---------- */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--re-text);
    background: #fff;
}
h1,h2,h3,h4,h5,h6,.re-display {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.04;
    color: var(--re-dark);
}
.re-display {
    font-size: clamp(2.4rem, 5.8vw, 4.6rem);
    text-transform: lowercase;
    letter-spacing: -.03em;
    line-height: .98;
}
.re-display--sm { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.re-eyebrow {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .78rem;
    color: var(--re-purple);
    display: inline-block;
    margin-bottom: .6rem;
}
.re-lead { font-size: 1.08rem; color: var(--re-muted); line-height: 1.7; }
.re-section { padding: 5rem 0; }
@media (max-width:768px){ .re-section { padding: 3rem 0; } }

/* ---------- Botones (estilo premium: relleno que barre hacia arriba + arrow) ---------- */
.re-btn {
    position: relative; overflow: hidden; z-index: 0; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-family: 'Archivo', sans-serif; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; line-height: 1;
    padding: 1rem 1.9rem; border-radius: 0;
    border: 2px solid transparent; text-decoration: none; cursor: pointer;
    transition: color .35s ease, border-color .35s ease, box-shadow .35s ease,
                transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* Capa de relleno que sube desde abajo al hover (color-swap) */
.re-btn::before {
    content:""; position:absolute; inset:0; z-index:-1;
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .45s cubic-bezier(.7,0,.2,1);
}
.re-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(22,20,58,.22); }
.re-btn:hover::before { transform: scaleY(1); }
.re-btn:active { transform: translateY(-1px); }
/* Flecha que aparece y se desliza (solo botones grandes de solo texto) */
.re-btn--lg::after {
    content:"\2192"; font-size:1.05em; line-height:0;
    max-width:0; opacity:0; transform:translateX(-6px);
    overflow:hidden;
    transition: max-width .35s ease, opacity .3s ease, transform .35s ease;
}
.re-btn--lg:hover::after { max-width:1.4em; opacity:1; transform:translateX(0); }

/* Variantes: fondo base + relleno contrastante al hover */
.re-btn--purple { background: var(--re-purple); color:#fff; }
.re-btn--purple::before { background: var(--re-dark); }
.re-btn--blue { background: var(--re-blue); color:#fff; }
.re-btn--blue::before { background: var(--re-purple); }
.re-btn--dark { background: var(--re-dark); color:#fff; }
.re-btn--dark::before { background: var(--re-purple); }
.re-btn--light { background:#fff; color: var(--re-purple); }
.re-btn--light::before { background: var(--re-purple); }
.re-btn--light:hover { color:#fff; }
.re-btn--outline { background: transparent; color:#fff; border-color: rgba(255,255,255,.65); }
.re-btn--outline::before { background:#fff; }
.re-btn--outline:hover { color: var(--re-purple); border-color:#fff; }
.re-btn--wa { background:#25D366; color:#fff; }
.re-btn--wa::before { background:#128C7E; }
.re-btn--lg { padding:1.1rem 2.2rem; font-size:.9rem; letter-spacing:.07em; }

/* ---------- Top bar ---------- */
.re-topbar {
    background: var(--re-dark);
    color: #c9c3e6;
    font-size: .82rem;
    padding: .45rem 0;
}
.re-topbar a { color:#c9c3e6; text-decoration:none; transition:color .2s; }
.re-topbar a:hover { color:#fff; }

/* ---------- Navbar ---------- */
.re-nav {
    background:#fff;
    position: -webkit-sticky; position: sticky; top: 0;
    z-index: 1030;
    box-shadow: 0 2px 20px rgba(22,20,58,.08);
    padding: .55rem 0;
    transition: padding .28s ease, box-shadow .28s ease;
}
/* Encoge al hacer scroll (main.js agrega .scrolled) */
.re-nav.scrolled { padding: .12rem 0; box-shadow: 0 6px 26px rgba(22,20,58,.15); }
.re-nav .navbar-brand { transition: font-size .28s ease; }
.re-nav.scrolled .navbar-brand { font-size: 1.02rem; }
.re-nav .brand-mark { transition: width .28s ease, height .28s ease, font-size .28s ease; }
.re-nav.scrolled .brand-mark { width: 32px; height: 32px; font-size: 1rem; }
.re-nav .navbar-brand { font-family:'Archivo',sans-serif; font-weight:900; color:var(--re-dark) !important; display:flex; align-items:center; gap:.55rem; letter-spacing:-.02em; }
.re-nav .navbar-brand span { color:var(--re-dark) !important; font-family:'Archivo',sans-serif; }
.re-nav .brand-mark { width:40px; height:40px; border-radius:10px; background:var(--re-purple); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
.re-nav .nav-link {
    position: relative;
    font-family:'Archivo',sans-serif; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; font-size:.8rem; color:var(--re-dark) !important;
    padding:.5rem .9rem !important; transition:color .2s;
}
.re-nav .nav-link:hover, .re-nav .nav-link.active { color:var(--re-purple) !important; background:transparent !important; }
/* Subrayado animado que se expande de izquierda a derecha al pasar el mouse */
.re-nav .nav-link:not(.re-cart)::after {
    content:""; position:absolute; left:.9rem; right:.9rem; bottom:.25rem;
    height:2px; border-radius:2px; background:var(--re-purple);
    transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.re-nav .nav-link:not(.re-cart):hover::after,
.re-nav .nav-link.active:not(.re-cart)::after { transform:scaleX(1); }
.re-nav .re-cart { position:relative; }
.re-nav .re-cart .badge { position:absolute; top:-3px; right:-6px; background:var(--re-purple); color:#fff; font-size:.6rem; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ---------- Bricks (bloques de color + foto) ---------- */
.re-bricks { display:grid; }
.re-brick { display:grid; grid-template-columns:3fr 1fr; min-height:300px; } /* 75% texto / 25% imagen */
.re-brick--rev { grid-template-columns:1fr 3fr; } /* invertida: imagen 25% izq, texto 75% der */
.re-brick__panel { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:2.5rem; padding:3.6rem; color:#fff; }
.re-brick__text { flex:1 1 auto; min-width:0; }
.re-brick__panel .re-display { color:#fff; }
.re-brick__media { background-size:cover; background-position:center; min-height:300px; }
.re-brick--purple .re-brick__panel { background:var(--re-purple); }
.re-brick--blue   .re-brick__panel { background:var(--re-blue); }
.re-brick--dark   .re-brick__panel { background:var(--re-dark); }
.re-brick--rev .re-brick__panel { order:2; }
.re-brick__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:0; flex-shrink:0; }
.re-hero .re-brick { min-height:300px; }
@media (max-width:768px){ .re-hero .re-brick { min-height:auto; } }
@media (max-width:768px){
    /* Móvil como la referencia: imagen arriba (full width) + panel de texto abajo */
    .re-brick, .re-brick--rev { grid-template-columns:1fr; }
    .re-brick__media { min-height:260px; order:-1; }
    .re-brick__panel { padding:2.4rem 1.6rem; order:0; flex-direction:column; align-items:flex-start; gap:0; }
    .re-brick__actions { margin-top:1.4rem; }
    .re-brick--rev .re-brick__panel { order:0; }
}

/* ---------- Bandas de color ---------- */
.re-band { padding:4.5rem 0; color:#fff; }
.re-band--purple { background:var(--re-purple); }
.re-band--blue   { background:var(--re-blue); }
.re-band--dark   { background:var(--re-dark); }
.re-band--light  { background:var(--re-light); color:var(--re-text); }
.re-band .re-eyebrow { color:#fff; opacity:.85; }
.re-band--light .re-eyebrow { color:var(--re-purple); opacity:1; }
.re-band h2 { color:inherit; }

/* ---------- Tarjetas ---------- */
.re-card { background:#fff; border:1px solid var(--re-line); border-radius:var(--re-radius); overflow:hidden; height:100%; transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.re-card:hover { transform:translateY(-6px); box-shadow:0 16px 38px rgba(43,46,131,.15); }
.re-card__media { height:210px; background:var(--re-light); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.re-card__media i { font-size:2.4rem; color:var(--re-accent); }
.re-card__body { padding:1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.re-card__cat { font-family:'Archivo',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; color:var(--re-purple); }
.re-card__title { font-size:1.02rem; font-weight:800; color:var(--re-dark); margin:.35rem 0 .6rem; line-height:1.2; }
.re-card__title a { color:inherit; text-decoration:none; }
.re-price { font-family:'Archivo',sans-serif; font-weight:800; color:var(--re-blue); font-size:1.15rem; }
.re-price__old { text-decoration:line-through; color:var(--re-muted); font-size:.85rem; font-weight:500; margin-right:.4rem; }
.re-badge-offer { background:var(--re-purple); color:#fff; font-family:'Archivo',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.65rem; padding:.25rem .6rem; border-radius:6px; }

/* Category color-block card */
.re-catblock { position:relative; border-radius:var(--re-radius); overflow:hidden; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.8rem; color:#fff; text-decoration:none; background-size:cover; background-position:center; }
.re-catblock::before { content:""; position:absolute; inset:0; opacity:.9; transition:opacity .25s; }
.re-catblock--purple::before { background:linear-gradient(180deg, rgba(108,63,160,.35), var(--re-purple)); }
.re-catblock--blue::before   { background:linear-gradient(180deg, rgba(43,46,131,.35), var(--re-blue)); }
.re-catblock--green::before  { background:linear-gradient(180deg, rgba(30,158,87,.35), #178E4E); }
.re-catblock--orange::before { background:linear-gradient(180deg, rgba(239,125,26,.35), #E0700F); }
.re-catblock--dark::before   { background:linear-gradient(180deg, rgba(22,20,58,.35), var(--re-dark)); }
.re-catblock:hover::before { opacity:1; }
.re-catblock > * { position:relative; z-index:1; color:#fff; }
.re-catblock h3 { color:#fff; font-size:1.5rem; text-transform:lowercase; }
.re-catblock .re-catblock__go { font-family:'Archivo'; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; margin-top:.5rem; display:inline-flex; align-items:center; gap:.4rem; }

/* Acordeón horizontal de categorías (ancho total, sin margen, se expande al hover) */
.re-cataccordion { display:flex; width:100%; }
.re-catpanel {
    flex:1 1 0; min-width:0; height:440px;
    position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:2.2rem;
    color:#fff; text-decoration:none;
    transition: flex-grow .55s cubic-bezier(.65,.05,.36,1);
}
.re-catpanel::before { content:""; position:absolute; inset:0; z-index:0; }
.re-catpanel__content { position:relative; z-index:1; }
.re-catpanel h3 { color:#fff; font-size:1.7rem; text-transform:lowercase; margin:0; white-space:nowrap; }
.re-catpanel .re-catblock__go { color:#fff; font-family:'Archivo',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; margin-top:.6rem; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.re-cataccordion:hover .re-catpanel { flex-grow:.5; }
.re-cataccordion .re-catpanel:hover { flex-grow:6; }
.re-catpanel:hover .re-catblock__go { opacity:1; transform:translateY(0); }
@media (max-width:768px){
    .re-cataccordion { flex-direction:column; }
    .re-catpanel { height:120px; flex:none; }
    .re-cataccordion:hover .re-catpanel, .re-cataccordion .re-catpanel:hover { flex-grow:0; }
    .re-catpanel .re-catblock__go { opacity:1; transform:none; }
}

/* ===== Grid de productos full-bleed (tienda + home destacados) ===== */
.re-shopgrid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--re-line); border-left:1px solid var(--re-line); }
@media (max-width:1200px){ .re-shopgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .re-shopgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .re-shopgrid{ grid-template-columns:1fr; } }
.re-shopcard { display:flex; flex-direction:column; padding:1.6rem 1.6rem 1.8rem; border-right:1px solid var(--re-line); border-bottom:1px solid var(--re-line); background:#fff; transition:background .35s ease; }
.re-shopcard:hover { background:var(--re-light); }
.re-shopcard__media { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#f1ecf9; margin-bottom:1.2rem; }
.re-shopcard__img { position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.re-shopcard:hover .re-shopcard__img { transform:scale(1.06); }
.re-shopcard__img i { font-size:2.6rem; color:var(--re-accent); }
.re-shopcard__media .re-badge-offer { position:absolute; top:12px; left:12px; z-index:2; }
.re-shopcard__cat { font-family:'Archivo',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--re-purple); }
.re-shopcard__name { font-family:'Archivo',sans-serif; font-weight:800; font-size:1.05rem; color:var(--re-dark); text-decoration:none; margin:.3rem 0 .5rem; display:block; line-height:1.2; }
.re-shopcard__name:hover { color:var(--re-purple); }
.re-shopcard__price { font-family:'Archivo',sans-serif; font-weight:800; color:var(--re-blue); font-size:1.15rem; margin-bottom:1.1rem; }
.re-shopcard__price s { color:var(--re-muted); font-weight:500; font-size:.85rem; margin-right:.4rem; }
.re-shopcard__add { margin-top:auto; }
@media (hover:hover) and (min-width:769px){
    .re-shopcard__add { opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease; }
    .re-shopcard:hover .re-shopcard__add { opacity:1; transform:translateY(0); }
}

/* ---------- Section heading ---------- */
.re-head { max-width:720px; }
.re-head h2 { font-size:clamp(2.6rem,5.5vw,4.4rem); text-transform:lowercase; }
.re-head--center { margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Footer ---------- */
.re-footer { background:var(--re-dark); color:#b4aed4; padding:4rem 0 1.5rem; }
.re-footer h5 { color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.re-footer a { color:#b4aed4; text-decoration:none; transition:color .2s; }
.re-footer a:hover { color:#fff; }
.re-footer .re-social a { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.re-footer .re-social a:hover { background:var(--re-purple); }
.re-footer hr { border-color:rgba(255,255,255,.12); }

/* ---------- Testimonials ---------- */
.re-quote { background:#fff; border:1px solid var(--re-line); border-radius:20px; padding:2.4rem; }
.re-quote__avatar { width:52px; height:52px; border-radius:50%; background:var(--re-purple); color:#fff; font-family:'Archivo'; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* Texto con degradado brillante animado (colores del sitio) */
.re-shine {
    background: linear-gradient(100deg, #6C3FA0 0%, #2B2E83 22%, #9a6fd6 42%, #7a4fc0 55%, #2B2E83 78%, #6C3FA0 100%);
    background-size: 240% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: re-shine 6s linear infinite;
}
@keyframes re-shine { to { background-position: 240% center; } }
@media (prefers-reduced-motion: reduce){ .re-shine { animation: none; } }

/* Fondo de formas líquidas que fluyen hacia arriba */
.re-liquid { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.re-liquid .blob {
    position:absolute; bottom:-25%;
    border-radius:45% 55% 60% 40%;
    filter: blur(46px); opacity:.5;
    animation: re-flow linear infinite;
    will-change: transform, opacity;
}
@keyframes re-flow {
    0%   { transform: translateY(10%) translateX(0) rotate(0deg) scale(.9); border-radius:45% 55% 60% 40%; opacity:0; }
    12%  { opacity:.5; }
    50%  { transform: translateY(-70vh) translateX(28px) rotate(180deg) scale(1.15); border-radius:60% 40% 48% 52%; }
    88%  { opacity:.42; }
    100% { transform: translateY(-135vh) translateX(-10px) rotate(360deg) scale(.95); border-radius:45% 55% 60% 40%; opacity:0; }
}
.re-liquid .b1 { left:6%;  width:300px; height:300px; background:radial-gradient(circle at 32% 30%, #9a6fd6, #6C3FA0); animation-duration:17s; animation-delay:0s; }
.re-liquid .b2 { left:34%; width:230px; height:230px; background:radial-gradient(circle at 32% 30%, #4a4fce, #2B2E83); animation-duration:21s; animation-delay:-7s; }
.re-liquid .b3 { left:58%; width:340px; height:340px; background:radial-gradient(circle at 32% 30%, #B39DDB, #6C3FA0); animation-duration:24s; animation-delay:-3s; opacity:.38; }
.re-liquid .b4 { left:80%; width:210px; height:210px; background:radial-gradient(circle at 32% 30%, #3a3e9e, #2B2E83); animation-duration:19s; animation-delay:-12s; }
.re-liquid .b5 { left:22%; width:180px; height:180px; background:radial-gradient(circle at 32% 30%, #8a5cd0, #57318A); animation-duration:26s; animation-delay:-15s; }
@media (prefers-reduced-motion: reduce){ .re-liquid .blob { animation:none; opacity:.35; } }

/* Utilities */
.re-white { color:#fff !important; }
.text-purple { color:var(--re-purple) !important; }
.text-blue { color:var(--re-blue) !important; }