/* ================================================
   CASOS DE ÉXITO — Public / Frontend Styles
   v2 — Responsive, Grid · Carrusel · Masonry · Lista
   ================================================ */

/* ══════════════════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════════════════ */
.cde-wrapper,
.cde-wrapper * {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════
   TABS DE TRATAMIENTO
══════════════════════════════════════════════════ */
.cde-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.cde-tab {
    padding: 8px 18px;
    border: 2px solid #e2e4e7;
    border-radius: 50px;
    background: #fff;
    color: #50575e;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.cde-tab:hover {
    border-color: var(--cde-accent, #c9964a);
    color: var(--cde-accent, #c9964a);
}

.cde-tab.is-active {
    border-color: var(--cde-accent, #c9964a);
    background: var(--cde-accent, #c9964a);
    color: #fff;
}

/* ══════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════ */
.cde-modo--grid {
    display: grid;
    gap: var(--cde-gap, 28px);
    grid-template-columns: repeat(var(--cde-cols, 3), 1fr);
}

.cde-grid--cols-1 { --cde-cols: 1; }
.cde-grid--cols-2 { --cde-cols: 2; }
.cde-grid--cols-3 { --cde-cols: 3; }
.cde-grid--cols-4 { --cde-cols: 4; }

/* Responsive del grid */
@media (max-width: 1100px) {
    .cde-grid--cols-4 { --cde-cols: 2; }
}
@media (max-width: 900px) {
    .cde-grid--cols-3,
    .cde-grid--cols-4 { --cde-cols: 2; }
}
@media (max-width: 600px) {
    .cde-modo--grid { --cde-cols: 1 !important; }
}

/* ══════════════════════════════════════════════════
   GAP VARIANTS
══════════════════════════════════════════════════ */
.cde-gap--compacto { --cde-gap: 12px; }
.cde-gap--normal   { --cde-gap: 28px; }
.cde-gap--amplio   { --cde-gap: 44px; }

/* ══════════════════════════════════════════════════
   MASONRY
══════════════════════════════════════════════════ */
.cde-modo--masonry {
    display: grid;
    gap: var(--cde-gap, 28px);
    grid-template-columns: repeat(var(--cde-cols, 3), 1fr);
    align-items: start;     /* clave: cada card ocupa su altura natural */
}

.cde-modo--masonry .cde-card {
    break-inside: avoid;
}

/* En navegadores que soporten masonry nativo */
@supports (grid-template-rows: masonry) {
    .cde-modo--masonry {
        grid-template-rows: masonry;
    }
}

@media (max-width: 900px) {
    .cde-modo--masonry { --cde-cols: 2; }
}
@media (max-width: 600px) {
    .cde-modo--masonry { --cde-cols: 1; }
}

/* ══════════════════════════════════════════════════
   LISTA
══════════════════════════════════════════════════ */
.cde-modo--lista {
    display: flex;
    flex-direction: column;
    gap: var(--cde-gap, 28px);
}

.cde-modo--lista .cde-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--cde-card-radius, 16px);
}

.cde-modo--lista .cde-slider {
    border-radius: var(--cde-card-radius, 16px) 0 0 var(--cde-card-radius, 16px);
}

.cde-modo--lista .cde-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 36px;
}

.cde-modo--lista .cde-card__title { font-size: 20px; }
.cde-modo--lista .cde-card__desc  { -webkit-line-clamp: 5; }

@media (max-width: 760px) {
    .cde-modo--lista .cde-card {
        grid-template-columns: 1fr;
    }
    .cde-modo--lista .cde-slider {
        border-radius: var(--cde-card-radius, 16px) var(--cde-card-radius, 16px) 0 0;
    }
    .cde-modo--lista .cde-card__body {
        padding: 20px 22px 24px;
    }
}

/* ══════════════════════════════════════════════════
   CARRUSEL
══════════════════════════════════════════════════ */
.cde-modo--carrusel {
    position: relative;
    overflow: hidden;
    /* Espacio lateral para flechas */
    padding: 0 0 56px;  /* reservar espacio para dots */
}

.cde-modo--carrusel.cde-carousel--ready {
    /* ya inicializado */
}

.cde-carousel__track {
    display: flex;
    gap: var(--cde-gap, 28px);
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.cde-carousel__track:active {
    cursor: grabbing;
}

.cde-carousel__slide {
    flex: 0 0 auto;
    /* El ancho se setea por JS */
}

/* Flechas */
.cde-carousel__arrow {
    position: absolute;
    top: calc(50% - 28px);  /* centrado en la imagen (no en dots) */
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 3px 14px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.cde-carousel__arrow svg {
    width: 22px;
    height: 22px;
    stroke: var(--cde-accent, #c9964a);
    flex-shrink: 0;
}

.cde-carousel__arrow--prev { left: 4px; }
.cde-carousel__arrow--next { right: 4px; }

.cde-carousel__arrow:hover {
    background: var(--cde-accent, #c9964a);
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
}

.cde-carousel__arrow:hover svg {
    stroke: #fff;
}

.cde-carousel__arrow.is-disabled,
.cde-carousel__arrow:disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Flechas: más margen en pantallas pequeñas */
@media (max-width: 480px) {
    .cde-carousel__arrow { width: 36px; height: 36px; }
    .cde-carousel__arrow svg { width: 18px; height: 18px; }
    .cde-carousel__arrow--prev { left: 2px; }
    .cde-carousel__arrow--next { right: 2px; }
}

/* Dots */
.cde-carousel__dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 4px 0;
}

.cde-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s, width 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.cde-carousel__dot.is-active {
    background: var(--cde-accent, #c9964a);
    width: 24px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════ */
.cde-card {
    position: relative;
    background: var(--cde-fondo-card, #fff);
    border-radius: var(--cde-card-radius, 16px);
    box-shadow: var(--cde-card-shadow, 0 4px 24px rgba(0,0,0,.08));
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cde-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.14);
}

.cde-card--destacado {
    outline: 2px solid var(--cde-accent, #c9964a);
    outline-offset: -2px;
}

/* Badge destacado */
.cde-badge-destacado {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    pointer-events: none;
}

.cde-badge-destacado svg { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════
   SLIDER ANTES / DESPUÉS
══════════════════════════════════════════════════ */
.cde-slider {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cde-slider-ratio, 4 / 3);
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: #111;
    flex-shrink: 0;
}

.cde-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Imagen DESPUÉS (fondo) */
.cde-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Imagen ANTES — clip-path, sin distorsión */
.cde-slider__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: inset(0 calc(100% - var(--cde-clip, 50%)) 0 0);
    will-change: clip-path;
}

.cde-slider__overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Handle */
.cde-slider__handle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    cursor: col-resize;
    will-change: left;
}

.cde-slider__line {
    flex: 1;
    width: 3px;
    background: var(--cde-line-color, rgba(255,255,255,.9));
    box-shadow: 0 0 8px rgba(0,0,0,.5);
}

.cde-slider__btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,.4);
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cde-slider:hover .cde-slider__btn,
.cde-slider--dragging .cde-slider__btn {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(0,0,0,.4);
}

.cde-slider__btn svg {
    width: 26px;
    height: 26px;
    color: var(--cde-handle-color, #c9964a);
    flex-shrink: 0;
}

/* Etiquetas */
.cde-tag {
    position: absolute;
    bottom: 14px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cde-tag--antes   { left: 14px;  background-color: var(--cde-tag-antes,   rgba(200,30,30,.75)); }
.cde-tag--despues { right: 14px; background-color: var(--cde-tag-despues, rgba(10,160,60,.75)); }

/* Slider más pequeño en móvil para que no ocupe toda la pantalla */
@media (max-width: 480px) {
    .cde-slider__btn { width: 36px; height: 36px; }
    .cde-slider__btn svg { width: 20px; height: 20px; }
    .cde-tag { font-size: 10px; padding: 3px 8px; bottom: 8px; }
}

/* ══════════════════════════════════════════════════
   CARD BODY
══════════════════════════════════════════════════ */
.cde-card__body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.cde-card__title {
    margin: 0;
    font-size: var(--cde-titulo-size, 17px);
    font-weight: var(--cde-titulo-weight, 700);
    line-height: 1.3;
    color: var(--cde-titulo, #1a1a2e);
    font-family: var(--cde-fuente-titulos, inherit);
}

/* Wrapper descripción + botón expandir */
.cde-card__desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;   /* evita desbordamiento en flex */
}

.cde-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--cde-descripcion, #555);
    font-family: var(--cde-fuente-cuerpo, inherit);

    /* Clamp por defecto: 3 líneas */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;

    /* Transición suave al expandir */
    transition: max-height 0.35s ease, -webkit-line-clamp 0s;
}

/* Estado expandido — eliminar clamp */
.cde-card__desc-wrap.is-expanded .cde-card__desc {
    display: block;         /* quita el -webkit-box */
    overflow: visible;
    -webkit-line-clamp: unset;
}

/* ── Botón expandir/contraer ── */
.cde-expand-btn {
    display: none;          /* oculto por defecto; JS lo muestra si hay overflow */
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 5px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cde-accent, #c9964a);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start;
}

.cde-expand-btn:hover { opacity: .75; }

/* El JS añade esta clase cuando hay texto cortado */
.cde-expand-btn.is-visible { display: inline-flex; }

.cde-expand-btn__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cde-accent, #c9964a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.25s;
}

.cde-expand-btn__icon svg {
    width: 12px;
    height: 12px;
    color: #fff;
    flex-shrink: 0;
}

/* Mostrar solo el icono correcto según el estado */
.cde-expand-icon--minus { display: none; }
.cde-expand-icon--plus  { display: block; }

.cde-card__desc-wrap.is-expanded .cde-expand-icon--plus  { display: none; }
.cde-card__desc-wrap.is-expanded .cde-expand-icon--minus { display: block; }

/* Rotar el icono cuando está expandido */
.cde-card__desc-wrap.is-expanded .cde-expand-btn__icon {
    transform: rotate(0deg);    /* sin rotación, el minus ya indica contraer */
}

/* Texto del botón */
.cde-expand-btn__label { line-height: 1; }

.cde-expand-label--less { display: none; }
.cde-expand-label--more { display: inline; }

.cde-card__desc-wrap.is-expanded .cde-expand-label--more { display: none; }
.cde-card__desc-wrap.is-expanded .cde-expand-label--less { display: inline; }

/* En modo lista: permitir más líneas antes de cortar */
.cde-modo--lista .cde-card__desc {
    -webkit-line-clamp: 5;
}

/* ── Botón CTA ── */
.cde-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: var(--cde-btn-pv, 10px) var(--cde-btn-ph, 20px);
    border-radius: var(--cde-btn-radius, 50px);
    background: var(--cde-accent, #c9964a);
    color: var(--cde-btn-text, #fff) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--cde-btn-shadow, 0 3px 10px rgba(201,150,74,.35));
    -webkit-tap-highlight-color: transparent;
}

.cde-btn:hover,
.cde-btn:focus {
    background: var(--cde-accent-hover, #a67c3a);
    color: var(--cde-btn-text, #fff) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--cde-accent-rgb, 201,150,74),.45);
    outline: none;
}

.cde-btn svg {
    width: 16px;
    height: 16px;
    color: var(--cde-btn-text, #fff);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.cde-btn:hover svg { transform: translateX(3px); }

/* ── Sin resultados ── */
.cde-no-results {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-style: italic;
}

/* ══════════════════════════════════════════════════
   ACCESIBILIDAD — foco visible
══════════════════════════════════════════════════ */
.cde-btn:focus-visible,
.cde-tab:focus-visible,
.cde-carousel__arrow:focus-visible,
.cde-carousel__dot:focus-visible,
.cde-slider__handle:focus-visible {
    outline: 3px solid var(--cde-accent, #c9964a);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════
   REDUCE MOTION
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cde-card { transition: none; }
    .cde-btn  { transition: none; }
    .cde-carousel__track { transition: none !important; }
    .cde-carousel__dot   { transition: none; }
    .cde-slider__overlay { transition: none; }
    .cde-slider__btn     { transition: none; }
}