/* ===== SECCIÓN DE INICIO ===== */

/* Título modernizado de Inicio con fondo de color acento */
.home-title-wrapper {
    background: var(--color-accent);
    padding: 1.875rem 2rem;
    margin: 0;
    position: relative;
    overflow: hidden;
}

/* Efecto decorativo de fondo con patrón sutil */
.home-title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.home-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.home-title-name {
    display: inline-block;
    animation: pulse-home 5s ease-in-out infinite;
    transition: all 0.3s ease;
}

/* Efecto hover: letter-spacing + scale + glow */
.home-title-name:hover {
    letter-spacing: 2px;
    transform: scale(1.05);
    animation-play-state: paused; /* Pausar animación pulse durante hover */
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),        /* Sombra base */
        0 0 20px rgba(255, 255, 255, 0.5),   /* Glow interno */
        0 0 35px rgba(255, 255, 255, 0.3);   /* Glow externo */
}

/* Animación para el nombre del actor */
@keyframes pulse-home {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.85;
    }
}

/* Icono de casa en esquina superior izquierda */
.home-icon-corner {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    font-size: 2.5rem;
    z-index: 2;
    display: inline-block;
    animation: pulse-home-icon 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Animación para el icono de casa */
@keyframes pulse-home-icon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .home-title-wrapper {
        padding: 1.5rem 1.5rem;
    }

    .home-title {
        font-size: 2rem;
    }

    .home-icon-corner {
        font-size: 1.75rem;
        top: 0.625rem;
        left: 0.75rem;
    }
}

@media (max-width: 480px) {
    .home-title {
        font-size: 1.75rem;
    }

    .home-icon-corner {
        font-size: 1.5rem;
        top: 0.5rem;
        left: 0.5rem;
    }
}

/* ===== SISTEMA DE SECCIONES DEL HOME ===== */

.home-sections-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sección base */
.home-section {
    display: grid;
    padding: 2.5rem 2rem;
    gap: 2rem;
    align-items: stretch;
}

/* Separador visual entre secciones */
.home-section + .home-section {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Layout basado en blocks (FASE 5): grid 12 cols ──
   Sobreescribe el grid-template-columns de las clases layout-X.
   La posición de cada bloque viene en grid-column/grid-row inline.
   El gap solo se aplica entre bloques distintos (los que abarcan varias
   columnas incluyen los gaps internos en su ancho), por lo que un gap
   razonable como 2rem solo "cuesta" ~32px entre dos bloques contiguos. */
.home-section.has-blocks {
    /* !important para ganar a las reglas .layout-X que vienen después
       en este archivo y especifican grid-template-columns con menos cols */
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: minmax(120px, auto);
    gap: 2rem;
}

.home-section.has-blocks .section-block {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-width: 0;
}

.home-section.has-blocks .section-block > .section-text,
.home-section.has-blocks .section-block > .section-media {
    width: 100%;
}

/* Responsive móvil: el grid 12 cols se apila en una columna */
@media (max-width: 768px) {
    .home-section.has-blocks {
        grid-template-columns: 1fr;
    }
    .home-section.has-blocks .section-block {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* ── Layout: mosaico izquierda, texto derecha ── */
.home-section.layout-mosaic-text-right {
    grid-template-columns: 1.1fr 0.9fr;
}
.home-section.layout-mosaic-text-right .section-media { order: 0; }
.home-section.layout-mosaic-text-right .section-text  { order: 1; }

/* ── Layout: texto izquierda, mosaico derecha ── */
.home-section.layout-mosaic-text-left {
    grid-template-columns: 0.9fr 1.1fr;
}
.home-section.layout-mosaic-text-left .section-text  { order: 0; }
.home-section.layout-mosaic-text-left .section-media { order: 1; }

/* ── Layout: mosaico arriba, texto abajo ── */
.home-section.layout-mosaic-top {
    grid-template-columns: 1fr;
}
.home-section.layout-mosaic-top .section-media { order: 0; }
.home-section.layout-mosaic-top .section-text  { order: 1; }

/* ── Layout: texto arriba, mosaico abajo ── */
.home-section.layout-text-top {
    grid-template-columns: 1fr;
}
.home-section.layout-text-top .section-text  { order: 0; }
.home-section.layout-text-top .section-media { order: 1; }

/* ── Layout: solo texto ──
   Sin max-width fijo: el ancho lo controla el selector de "Ancho" de la
   sección (auto/wide/medium/narrow/custom). El antiguo max-width 760px
   forzaba siempre una columna estrecha aunque el usuario eligiera "Ancho".
   Si quieres limitar el ancho del texto para legibilidad, usa "Estrecho"
   (900px) o "Mediano" (1250px) desde el admin de la sección. */
.home-section.layout-text-only {
    grid-template-columns: 1fr;
    width: 100%;
}

/* ── Layout: solo mosaico ── */
.home-section.layout-mosaic-only {
    grid-template-columns: 1fr;
}

/* ── Media container ── */
.section-media {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: auto;
}

/* ── Imagen de sección única ── */
.section-image {
    display: block;
    width: auto;
    max-width: 100%;
    border-radius: 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Modo automático: imagen a tamaño natural centrada */
    height: auto;
    max-height: var(--img-height, 600px);
}
.section-image:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* Reserva espacio antes de cargar (anti-CLS): si el <img> trae width/height
   en HTML, el browser usa esos atributos. Si no, fallback 16/9 con contain
   para no distorsionar imágenes verticales. */
.section-image:not([width]) {
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

/* ── Poster de video con overlay de play (lazy load del MP4) ── */
.video-poster-wrapper {
    position: relative;
    display: block;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #000;
}
.video-poster-wrapper.section-video {
    width: auto;
    max-width: 100%;
    margin: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.video-poster-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-poster-wrapper.section-video .video-poster-img {
    height: auto;
    max-height: var(--img-height, 600px);
}
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    padding-left: 4px;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    z-index: 2;
    pointer-events: none;
}
.video-poster-wrapper:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.08);
    border-color: white;
}

/* Con altura fija: imagen rellena el espacio definido */
.home-section.height-small .section-media,
.home-section.height-medium .section-media,
.home-section.height-large .section-media,
.home-section[style*="--img-height"] .section-media {
    display: flex;
    width: 100%;
    align-items: center;
}

/* Custom height — forzar height del media (no solo min-height) para que
   el grid externo (.home-section.has-blocks con grid-auto-rows: auto) no
   use el max-content de las imágenes y respete el alto que el usuario fijó.
   Sin height fija, el row se expande al tamaño natural de las imágenes y
   no permite encoger por debajo. overflow: hidden recorta lo que sobre. */
.home-section[style*="--media-min-height"] .section-media {
    min-height: var(--media-min-height);
    height: var(--media-min-height);
    overflow: hidden;
}
.home-section.height-small .section-media .section-image,
.home-section.height-medium .section-media .section-image,
.home-section.height-large .section-media .section-image,
.home-section[style*="--img-height"] .section-media .section-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ── Mosaicos ── */

/* Ancho completo para todos los mosaicos */
.section-mosaic {
    width: 100%;
}

/* ── Visual config (Tier 1+2) ──
   .section-media tiene defaults; el render JS sobreescribe inline. Las
   vars cascade a .mosaic-img / .video-poster-wrapper / .section-image. */
.section-media {
    --mosaic-gap: 0.5rem;
    --mosaic-radius: 0.5rem;
    --mosaic-filter: none;
    --mosaic-border: none;
}
.section-mosaic {
    gap: var(--mosaic-gap, 0.5rem);
}
.mosaic-img,
.section-mosaic .video-poster-wrapper {
    border-radius: var(--mosaic-radius, 0.5rem);
    filter: var(--mosaic-filter, none);
    border: var(--mosaic-border, none);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
/* Single image / video también respetan la visual config */
.section-image,
.section-media > .section-video,
.section-media > .video-poster-wrapper {
    border-radius: var(--mosaic-radius, 0.75rem);
    filter: var(--mosaic-filter, none);
    border: var(--mosaic-border, none);
}

/* === Hover effects: clase en .section-media (cubre single + mosaico) === */
/* none: sin transform extra (CSS por defecto) */
.section-media.mosaic-hover-zoom .mosaic-img:hover,
.section-media.mosaic-hover-zoom .video-poster-wrapper:hover,
.section-media.mosaic-hover-zoom > .section-image:hover {
    transform: scale(1.03);
    z-index: 1;
}
.section-media.mosaic-hover-lift .mosaic-img:hover,
.section-media.mosaic-hover-lift .video-poster-wrapper:hover,
.section-media.mosaic-hover-lift > .section-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);
    z-index: 1;
}
/* dim: aplica solo al mosaico — para single image no tiene sentido (no hay
   "otros" items que oscurecer). */
.section-media.mosaic-hover-dim .section-mosaic:hover .mosaic-img:not(:hover),
.section-media.mosaic-hover-dim .section-mosaic:hover .video-poster-wrapper:not(:hover) {
    opacity: 0.5;
}
/* none: anular el transform por defecto del .section-image:hover legacy
   cuando el usuario elige hover=none explícitamente. */
.section-media.mosaic-hover-none > .section-image:hover {
    transform: none;
    box-shadow: var(--mosaic-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
}

/* Mosaico 1 imagen */
.section-mosaic.count-1 .mosaic-img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
}
/* Reserva espacio antes de cargar (anti-CLS): mismo patrón que .section-image */
.section-mosaic.count-1 .mosaic-img:not([width]) {
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

/* Mosaico 2 imágenes: lado a lado */
.section-mosaic.count-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Auto-orientación count-2 (estilo grid): si ambos items son landscape,
   render apilado vertical en vez de side-by-side. Clase añadida desde
   home-render.js cuando detectCount2GridOrientation() === 'landscape'. */
.section-mosaic.count-2.mosaic-orient-landscape {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Mosaico 2 imágenes en modo automático: ratio 4:3 */
.home-section:not(.height-small):not(.height-medium):not(.height-large):not([style*="--mosaic-height"]) .section-mosaic.count-2 .mosaic-img {
    height: auto;
    aspect-ratio: 4 / 3;
}

/* === Altura fija (preset o custom): count-2/3/4 llenan el área media ===
   Sin esto, .mosaic-img usa height: var(--mosaic-height, 200px) que se queda
   pequeño cuando arrastras la sección a más alto.
   Selectores: usamos el patrón establecido (.height-X o [style*="--img-height"])
   para que también capture el drag en vivo (sin esperar re-render); la clase
   .has-fixed-media-height se añade al renderizar pero no se actualiza durante
   el arrastre.
   align-self: stretch es CLAVE — sin él, .section-media (flex con
   align-items: center) deja el mosaico centrado verticalmente sin estirarlo.
   IMPORTANTE: NO ponemos height: 100% aquí porque suprime el stretch
   (CSS spec: stretch solo aplica si cross-size property es 'auto'). El mosaico
   se estira por align-self, y los hijos miden contra esa altura ya definida. */
.home-section.height-small .section-media .section-mosaic.count-2,
.home-section.height-medium .section-media .section-mosaic.count-2,
.home-section.height-large .section-media .section-mosaic.count-2,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-2,
.home-section.height-small .section-media .section-mosaic.count-3,
.home-section.height-medium .section-media .section-mosaic.count-3,
.home-section.height-large .section-media .section-mosaic.count-3,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-3,
.home-section.height-small .section-media .section-mosaic.count-4,
.home-section.height-medium .section-media .section-mosaic.count-4,
.home-section.height-large .section-media .section-mosaic.count-4,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-4 {
    align-self: stretch;
}
/* Fill-height por count + orientación. minmax(0, 1fr) permite que las filas
   encojan por debajo del min-content (1fr solo no lo permite). */
.home-section.height-small .section-media .section-mosaic.count-2,
.home-section.height-medium .section-media .section-mosaic.count-2,
.home-section.height-large .section-media .section-mosaic.count-2,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-2,
.home-section.height-small .section-media .section-mosaic.count-3,
.home-section.height-medium .section-media .section-mosaic.count-3,
.home-section.height-large .section-media .section-mosaic.count-3,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-3 {
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
}
/* count-2 landscape (apilada) y count-4 (2x2) usan 2 filas */
.home-section.height-small .section-media .section-mosaic.count-2.mosaic-orient-landscape,
.home-section.height-medium .section-media .section-mosaic.count-2.mosaic-orient-landscape,
.home-section.height-large .section-media .section-mosaic.count-2.mosaic-orient-landscape,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-2.mosaic-orient-landscape,
.home-section.height-small .section-media .section-mosaic.count-4,
.home-section.height-medium .section-media .section-mosaic.count-4,
.home-section.height-large .section-media .section-mosaic.count-4,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-4 {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
}
.home-section.height-small .section-media .section-mosaic.count-2 .mosaic-img,
.home-section.height-medium .section-media .section-mosaic.count-2 .mosaic-img,
.home-section.height-large .section-media .section-mosaic.count-2 .mosaic-img,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-2 .mosaic-img,
.home-section.height-small .section-media .section-mosaic.count-3 .mosaic-img,
.home-section.height-medium .section-media .section-mosaic.count-3 .mosaic-img,
.home-section.height-large .section-media .section-mosaic.count-3 .mosaic-img,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-3 .mosaic-img,
.home-section.height-small .section-media .section-mosaic.count-4 .mosaic-img,
.home-section.height-medium .section-media .section-mosaic.count-4 .mosaic-img,
.home-section.height-large .section-media .section-mosaic.count-4 .mosaic-img,
.home-section[style*="--img-height"] .section-media .section-mosaic.count-4 .mosaic-img {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

/* Mosaico 3 imágenes (estilo cuadrícula default): 3 cols × 1 row simétrico.
   El estilo "featured" sobreescribe con su patrón hero+thumbs. */
.section-mosaic.count-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
/* Modo automático: cada celda con aspect-ratio 4:3 */
.home-section:not(.height-small):not(.height-medium):not(.height-large):not([style*="--mosaic-height"]) .section-mosaic.count-3 .mosaic-img {
    height: auto;
    aspect-ratio: 4 / 3;
}

/* Mosaico 4 imágenes (estilo cuadrícula default): 2x2 simétrico siempre.
   El estilo "featured" sobreescribe con hero+thumbs apiladas. */
.section-mosaic.count-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}
.home-section:not(.height-small):not(.height-medium):not(.height-large):not([style*="--mosaic-height"]) .section-mosaic.count-4 .mosaic-img {
    height: auto;
    aspect-ratio: 4 / 3;
}

.mosaic-img {
    width: 100%;
    height: var(--mosaic-height, 200px);
    object-fit: cover;
    cursor: pointer;
}
/* (border-radius, box-shadow, filter, border, transition y hover effects
   se aplican via vars + clases mosaic-hover-* desde el bloque "Visual config"
   más arriba — no duplicar aquí.) */

/* === MOSAICO con 5+ elementos (sin tope a 4) ===
   Reglas específicas para counts comunes para tener cuadrículas equilibradas.
   Cualquiera con > 9 cae al auto-fit responsive como fallback.
   Para count-5+ las celdas usan aspect-ratio para evitar que la altura
   custom de la sección descuadre la rejilla. */
.section-mosaic.count-5,
.section-mosaic.count-6,
.section-mosaic.count-9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
}

.section-mosaic.count-7,
.section-mosaic.count-8 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
}

.section-mosaic:not(.count-1):not(.count-2):not(.count-3):not(.count-4):not(.count-5):not(.count-6):not(.count-7):not(.count-8):not(.count-9) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-rows: none;
}

/* Celdas para count-5+: aspect-ratio fijo para que no las descuadre la
   altura custom de la sección. Excluye mosaic-style-bento porque tiene
   sus propias reglas de nth-child con grid-column/grid-row específicos. */
.section-mosaic:not(.count-1):not(.count-2):not(.count-3):not(.count-4):not(.mosaic-style-bento):not(.mosaic-style-carousel):not(.mosaic-style-justified) .mosaic-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    grid-row: auto;
    grid-column: auto;
}

/* ───────────────────────────────────────────────
   ESTILOS DE MOSAICO (mosaicStyle del usuario)
   - grid: comportamiento por defecto (las reglas de arriba)
   - featured: una grande + thumbs
   - masonry: columnas tipo Pinterest
   - bento: rejilla 6-cols con celdas de tamaños diferentes
   ─────────────────────────────────────────────── */

/* === FEATURED === una grande dominante + thumbs apiladas === */
.section-mosaic.mosaic-style-featured.count-2 {
    grid-template-columns: 2.4fr 1fr !important;
}

.section-mosaic.mosaic-style-featured.count-3 {
    grid-template-columns: 3fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
}
.section-mosaic.mosaic-style-featured.count-3 .mosaic-img:first-child {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
}

.section-mosaic.mosaic-style-featured.count-4 {
    grid-template-columns: 3fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
}
.section-mosaic.mosaic-style-featured.count-4 .mosaic-img:first-child {
    grid-row: 1 / 4 !important;
    grid-column: 1 !important;
}

/* === BENTO === grid 6-cols con celdas de tamaños distintos === */
.section-mosaic.mosaic-style-bento {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: minmax(120px, 1fr);
}
.section-mosaic.mosaic-style-bento .mosaic-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
}

/* count-2: 4+2 */
.section-mosaic.mosaic-style-bento.count-2 .mosaic-img:nth-child(1) { grid-column: 1 / 5; }
.section-mosaic.mosaic-style-bento.count-2 .mosaic-img:nth-child(2) { grid-column: 5 / 7; }

/* count-3: A grande izq + 2 apiladas der */
.section-mosaic.mosaic-style-bento.count-3 {
    grid-template-rows: repeat(2, minmax(120px, 1fr)) !important;
}
.section-mosaic.mosaic-style-bento.count-3 .mosaic-img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; }
.section-mosaic.mosaic-style-bento.count-3 .mosaic-img:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.section-mosaic.mosaic-style-bento.count-3 .mosaic-img:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }

/* count-4: A grande + 2 apiladas der + 1 horizontal abajo */
.section-mosaic.mosaic-style-bento.count-4 {
    grid-template-rows: repeat(3, minmax(110px, 1fr)) !important;
}
.section-mosaic.mosaic-style-bento.count-4 .mosaic-img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; }
.section-mosaic.mosaic-style-bento.count-4 .mosaic-img:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.section-mosaic.mosaic-style-bento.count-4 .mosaic-img:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
.section-mosaic.mosaic-style-bento.count-4 .mosaic-img:nth-child(4) { grid-column: 1 / 7; grid-row: 3; }

/* count-5: 2 medianas arriba + 3 pequeñas abajo */
.section-mosaic.mosaic-style-bento.count-5 {
    grid-template-rows: repeat(2, minmax(120px, 1fr)) !important;
}
.section-mosaic.mosaic-style-bento.count-5 .mosaic-img:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.section-mosaic.mosaic-style-bento.count-5 .mosaic-img:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.section-mosaic.mosaic-style-bento.count-5 .mosaic-img:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
.section-mosaic.mosaic-style-bento.count-5 .mosaic-img:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
.section-mosaic.mosaic-style-bento.count-5 .mosaic-img:nth-child(5) { grid-column: 5 / 7; grid-row: 2; }

/* count-6: A grande + 2 apiladas + 3 pequeñas abajo */
.section-mosaic.mosaic-style-bento.count-6 {
    grid-template-rows: repeat(3, minmax(110px, 1fr)) !important;
}
.section-mosaic.mosaic-style-bento.count-6 .mosaic-img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; }
.section-mosaic.mosaic-style-bento.count-6 .mosaic-img:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.section-mosaic.mosaic-style-bento.count-6 .mosaic-img:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
.section-mosaic.mosaic-style-bento.count-6 .mosaic-img:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-6 .mosaic-img:nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-6 .mosaic-img:nth-child(6) { grid-column: 5 / 7; grid-row: 3; }

/* count-7: A grande + 2 apiladas + 4 pequeñas abajo */
.section-mosaic.mosaic-style-bento.count-7 {
    grid-template-rows: repeat(3, minmax(110px, 1fr)) !important;
}
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; }
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(5) { grid-column: 3 / 4; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(6) { grid-column: 4 / 5; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-7 .mosaic-img:nth-child(7) { grid-column: 5 / 7; grid-row: 3; }

/* count-8: 2 grandes + 6 pequeñas */
.section-mosaic.mosaic-style-bento.count-8 {
    grid-template-rows: repeat(3, minmax(110px, 1fr)) !important;
}
.section-mosaic.mosaic-style-bento.count-8 .mosaic-img:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.section-mosaic.mosaic-style-bento.count-8 .mosaic-img:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; }
.section-mosaic.mosaic-style-bento.count-8 .mosaic-img:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-8 .mosaic-img:nth-child(4) { grid-column: 3 / 4; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-8 .mosaic-img:nth-child(5) { grid-column: 4 / 5; grid-row: 3; }
.section-mosaic.mosaic-style-bento.count-8 .mosaic-img:nth-child(6) { grid-column: 5 / 7; grid-row: 3; }
/* 7 y 8 mantienen el patrón de 6 con extras al final si pasan */

/* count-9+ con bento: cae al fallback masonry-like (auto-fit en 6 cols) */
.section-mosaic.mosaic-style-bento:not(.count-2):not(.count-3):not(.count-4):not(.count-5):not(.count-6):not(.count-7):not(.count-8) {
    grid-auto-flow: dense;
}

/* === MASONRY === multi-column tipo Pinterest === */
.section-mosaic.mosaic-style-masonry {
    display: block !important;
    column-count: 2;
    column-gap: var(--mosaic-gap, 0.5rem);
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}
.section-mosaic.mosaic-style-masonry .mosaic-img {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    margin-bottom: var(--mosaic-gap, 0.5rem);
    break-inside: avoid;
    display: block;
    grid-row: auto !important;
    grid-column: auto !important;
}
@media (min-width: 1024px) {
    .section-mosaic.mosaic-style-masonry {
        column-count: 3;
    }
}

/* === CARRUSEL === slides horizontales con scroll-snap === */
.section-mosaic.mosaic-style-carousel {
    display: block !important;
    position: relative;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}
.mosaic-style-carousel .carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--mosaic-gap, 0.5rem);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mosaic-style-carousel .carousel-track::-webkit-scrollbar {
    display: none;
}
.mosaic-style-carousel .carousel-track .mosaic-img {
    flex: 0 0 100%;
    scroll-snap-align: center;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    grid-row: auto;
    grid-column: auto;
}
@media (min-width: 1024px) {
    .mosaic-style-carousel .carousel-track .mosaic-img {
        flex: 0 0 80%;
    }
}
.mosaic-style-carousel .carousel-prev,
.mosaic-style-carousel .carousel-next {
    position: absolute;
    top: calc(50% - 1.5rem);
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.mosaic-style-carousel .carousel-prev:hover,
.mosaic-style-carousel .carousel-next:hover {
    background: white;
    transform: translateY(-50%) scale(1.05);
}
.mosaic-style-carousel .carousel-prev { left: 0.5rem; }
.mosaic-style-carousel .carousel-next { right: 0.5rem; }
.mosaic-style-carousel .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.mosaic-style-carousel .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.mosaic-style-carousel .carousel-dot:hover {
    background: rgba(0, 0, 0, 0.4);
}
.mosaic-style-carousel .carousel-dot.is-active {
    background: var(--color-accent);
    transform: scale(1.3);
}

/* === JUSTIFICADO === filas con altura uniforme, anchos segun aspect-ratio
   (estilo Flickr/Google Photos). Cada item lleva --ar inline desde JS y
   crece proporcionalmente para llenar la fila. Object-fit: cover absorbe
   pequenas imprecisiones de la ultima fila. */
.section-mosaic.mosaic-style-justified {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--mosaic-gap, 0.5rem);
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}
.mosaic-style-justified .mosaic-img {
    height: 200px;
    flex: var(--ar, 1.33) 1 calc(var(--ar, 1.33) * 200px);
    min-width: 0;
    object-fit: cover;
    grid-row: auto;
    grid-column: auto;
    aspect-ratio: auto !important;
}
@media (max-width: 600px) {
    .mosaic-style-justified .mosaic-img {
        height: 140px;
        flex-basis: calc(var(--ar, 1.33) * 140px);
    }
}

/* ── Responsive ── */

/* Columna única: solo en pantallas pequeñas (móvil real) */
@media (max-width: 600px) {
    .home-section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .home-section.layout-mosaic-text-left,
    .home-section.layout-mosaic-text-right,
    .home-section.layout-mosaic-top,
    .home-section.layout-text-top {
        grid-template-columns: 1fr;
        padding: 1.75rem 0.5rem;
    }

    /* En móvil: respetar el orden lógico de cada layout */
    /* text-left (texto izq, mosaico dcha): texto primero en móvil */
    .home-section.layout-mosaic-text-left .section-text  { order: 0 !important; }
    .home-section.layout-mosaic-text-left .section-media { order: 1 !important; }
    /* text-right (mosaico izq, texto dcha): mosaico primero en móvil */
    .home-section.layout-mosaic-text-right .section-media { order: 0 !important; }
    .home-section.layout-mosaic-text-right .section-text  { order: 1 !important; }
    /* layouts verticales: ya tienen 1 columna, mantener su orden natural */
    .home-section.layout-mosaic-top .section-media { order: 0 !important; }
    .home-section.layout-mosaic-top .section-text  { order: 1 !important; }
    .home-section.layout-text-top .section-text    { order: 0 !important; }
    .home-section.layout-text-top .section-media   { order: 1 !important; }

    /* En móvil columna única: imagen con altura natural, no estira */
    .section-media { align-items: flex-start; }
    .section-media .section-image { height: auto; max-height: 320px; }

    /* Mosaico en móvil: 1 columna, una imagen por línea */
    .section-mosaic.count-2,
    .section-mosaic.count-3,
    .section-mosaic.count-4 {
        grid-template-columns: 1fr;
        grid-template-rows: unset;
    }
    .section-mosaic.count-3 .mosaic-img:first-child,
    .section-mosaic.count-4 .mosaic-img:first-child {
        grid-row: unset;
        grid-column: unset;
        height: 200px;
    }
    .mosaic-img { height: 200px; }
}

/* Ajustes de mosaico en tablet */
@media (min-width: 601px) and (max-width: 768px) {
    .section-mosaic.count-3,
    .section-mosaic.count-4 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 150px 150px;
    }
    .section-mosaic.count-3 .mosaic-img:first-child {
        grid-row: unset;
        grid-column: 1 / 3;
        height: 150px;
    }
    .section-mosaic.count-4 .mosaic-img:first-child {
        grid-row: unset;
        grid-column: 1 / 3;
        height: 150px;
    }
    .mosaic-img { height: 150px; }
}

@media (max-width: 480px) {
    .home-section { padding: 1.25rem 1rem; gap: 1rem; }
}

/* ── Alturas de sección: controlan imagen y mosaico ── */
.home-section.height-small  { --img-height: 180px; --mosaic-height: 110px; }
.home-section.height-medium { --img-height: 300px; --mosaic-height: 160px; }
.home-section.height-large  { --img-height: 520px; --mosaic-height: 240px; }

/* ── Anchos de sección ── */
.home-section.width-wide   { max-width: 1600px; margin-left: auto; margin-right: auto; }
.home-section.width-medium { max-width: 1250px; margin-left: auto; margin-right: auto; }
.home-section.width-narrow { max-width:  900px; margin-left: auto; margin-right: auto; }

/* ===== ADMIN: EDITOR DE SECCIONES ===== */

#home-sections-editor .layout-option svg {
    width: 100%;
    height: 100%;
}

#home-sections-editor .section-image-thumbs img {
    display: block;
}

/* Dropzone en estado de subida (admin) */
.portfolio-dropzone.uploading {
    pointer-events: none;
    border-style: solid;
    border-color: var(--color-accent);
    background-color: rgba(var(--color-accent-rgb), 0.04);
}

/* ── Vídeo de sección ── */
.section-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Vídeo embebido externo (YouTube / Vimeo) ── */
/* Wrapper con aspect-ratio 16/9 para que el iframe respete el layout del
   mosaico igual que un <video> con poster. width:100% asegura que rellene
   la celda del mosaico. */
.video-embed-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: inherit;
    background: #000;
}

.video-embed-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Modal selector de layout */
#layout-picker-modal .layout-option:hover svg rect {
    fill: var(--color-accent, #6366f1);
    opacity: 0.8;
    transition: fill 0.2s ease;
}

/* ============================================
   ADMIN INICIO: cards de sección con acordeón
   ============================================ */

.hd-section-card {
    transition: box-shadow 0.15s ease;
}

.hd-section-card.is-collapsed .hd-section-body {
    display: none;
}

.hd-section-card.is-expanded {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hd-section-card.is-expanded .hd-section-chevron {
    transform: rotate(180deg);
}

.hd-section-card.is-collapsed .hd-section-chevron {
    transform: rotate(0deg);
}

.hd-section-card.is-expanded .hd-section-header {
    border-bottom: 1px solid #e5e7eb;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hd-section-thumb {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #e5e7eb;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hd-section-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hd-section-thumb-empty {
    color: #9ca3af;
}

.hd-section-layout-mini {
    display: inline-flex;
    width: 1.5rem;
    height: 1rem;
    flex-shrink: 0;
}

.hd-section-layout-mini svg {
    width: 100%;
    height: 100%;
}

/* Estados de Sortable durante el drag de secciones en el formulario */
.hd-form-ghost {
    opacity: 0.4;
}

.hd-form-chosen {
    cursor: grabbing;
}

.hd-form-drag {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    cursor: grabbing;
}

.hd-section-drag-handle:active {
    cursor: grabbing;
}

/* ============================================
   VISTA DE DISEÑO (admin de Inicio, embebida en el card)
   FASE 2: esqueleto, modo lectura
   ============================================ */

.home-design-canvas {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* FASE 7.3 — overlay cuando la ventana baja de 1024px durante la sesión */
.hd-too-small-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hd-too-small-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    width: 100%;
    padding: 2rem;
    text-align: center;
}

.hd-too-small-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.home-design-stage {
    background: white;
    min-height: 200px;
}

/* Wrapper de cada sección — posiciona el handle de drag y muestra borde
   punteado en hover, similar al patrón de los dropzones del admin */
.home-design-section-wrapper {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 0.75rem;
    margin: 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.home-design-section-wrapper:hover {
    border-color: var(--color-accent);
    background-color: rgba(var(--color-accent-rgb, 110, 64, 217), 0.03);
}

/* Handle de drag — invisible por defecto, aparece al pasar el cursor */
.hd-section-handle {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(30, 30, 42, 0.9);
    color: white;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    z-index: 10;
    cursor: grab;
    user-select: none;
}

.home-design-section-wrapper:hover .hd-section-handle,
.hd-section-handle:hover {
    opacity: 1;
    background: var(--color-accent);
}

.hd-section-handle:active {
    cursor: grabbing;
}

.hd-handle-grip {
    display: inline-flex;
    align-items: center;
}

.hd-handle-label {
    line-height: 1;
}

/* Estados de SortableJS durante el drag */
.hd-ghost {
    opacity: 0.4;
}

.hd-chosen .hd-section-handle {
    opacity: 1;
}

.hd-drag {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Botones de acción de sección (top-right, visibles en hover) */
.hd-section-action {
    position: absolute;
    top: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    z-index: 10;
    padding: 0;
}

.home-design-section-wrapper:hover .hd-section-action {
    opacity: 1;
}

/* Botones de acción de sección, de derecha a izquierda:
   delete (rojo) → layout (negro) → mosaic-style (negro) → reset (naranja, condicional) */

/* Botón cambiar layout — pegado al de eliminar */
.hd-section-layout {
    right: 2.75rem;
    background: rgba(30, 30, 42, 0.9);
}
.hd-section-layout:hover {
    background: var(--color-accent);
}

/* Botón cambiar estilo de mosaico — a la izquierda del de layout, con
   color teal para diferenciarlo del navy del layout (mismo grupo
   visual pero distinguible). */
.hd-section-mosaic-style {
    right: 5rem;
    background: rgba(13, 148, 136, 0.9); /* teal-600 */
}
.hd-section-mosaic-style:hover {
    background: rgb(15, 118, 110); /* teal-700 */
}

/* Botón restablecer (solo aparece cuando hay cambios manuales) — a la
   izquierda del trío layout+mosaic-style+delete. */
.hd-section-reset {
    right: 7.25rem;
    background: rgba(245, 158, 11, 0.9); /* amber */
}
.hd-section-reset:hover {
    background: rgb(217, 119, 6);
}

/* Botón eliminar sección */
.hd-section-delete {
    right: 0.5rem;
    background: rgba(239, 68, 68, 0.9);
}

.hd-section-delete:hover {
    background: rgb(220, 38, 38);
}


/* Handle de drag por bloque (FASE 5 paso 2) — esquina superior izquierda
   del bloque, visible solo en hover, similar al chip de sección pero más
   pequeño y discreto. */
.hd-block-handle {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(30, 30, 42, 0.85);
    color: white;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    z-index: 9;
    cursor: grab;
    user-select: none;
}

.section-block:hover > .hd-block-handle {
    opacity: 1;
}

.hd-block-handle:hover {
    background: var(--color-accent);
}

.hd-block-handle:active,
.hd-block-dragging > .hd-block-handle {
    cursor: grabbing;
}

.hd-block-dragging {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 11;
    opacity: 0.9;
}

/* Botón "Editar" en cada bloque (top-right). Visible al hover, ofrece
   alternativa al doble-click (que en imágenes/vídeos puede chocar con
   sus acciones nativas: lightbox, reproducir). */
.hd-block-edit {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 30, 42, 0.85);
    color: white;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, left 0.15s ease;
    z-index: 9;
    cursor: pointer;
    padding: 0;
}

/* Si el bloque también tiene el chip de drag, desplazar el edit a su derecha
   (drag en left:0.5rem + 1.5rem ancho + 0.25rem gap = 2.25rem) */
.section-block:has(.hd-block-handle) .hd-block-edit {
    left: 2.25rem;
}

.section-block:hover > .hd-block-edit {
    opacity: 1;
}

.hd-block-edit:hover {
    background: var(--color-accent);
}

/* FASE 6 paso 1 — edición inline de texto */
.section-text.hd-editing {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 0.5rem;
    cursor: text;
}

.hd-floating-toolbar {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.25rem;
    overflow-x: auto;
}

/* Iconos en el panel de ayuda — réplica visual de los chips reales */
.hd-help-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    color: white;
    flex-shrink: 0;
    margin-top: 0.125rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Variantes para los handles de borde (no son chips circulares sino que
   simulan el rectángulo del bloque/sección con la línea resize en el borde) */
.hd-help-chip-edge-right,
.hd-help-chip-edge-bottom {
    background: rgba(229, 231, 235, 0.6);
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.hd-help-chip-edge-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3px;
    background: var(--color-accent);
}

.hd-help-chip-edge-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-accent);
}

/* FASE 6 paso 2 — modal de edición de media */
.hd-media-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hd-media-editor-dialog {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.hd-media-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Mini-formulario para añadir enlace externo de vídeo (YouTube/Vimeo)
   debajo de la dropzone en el modal de media. */
.hd-media-url-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hd-media-url-input {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #1f2937;
    background: #fff;
}

.hd-media-url-input:focus {
    outline: none;
    border-color: var(--color-accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.hd-media-url-btn {
    padding: 0.375rem 0.75rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s;
}

.hd-media-url-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.hd-media-editor-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.hd-media-editor-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Handle de resize horizontal por bloque (FASE 5 paso 3) — borde derecho.
   Visible en hover, gana color acento al arrastrar. */
.hd-block-resize-right {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 8;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.section-block:hover > .hd-block-resize-right {
    opacity: 1;
    background: rgba(var(--color-accent-rgb, 110, 64, 217), 0.25);
}

.hd-block-resize-right:hover,
.hd-block-resizing > .hd-block-resize-right {
    opacity: 1 !important;
    background: var(--color-accent);
}

/* Handle de resize de altura — borde inferior */
.hd-resize-handle-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 8px;
    cursor: ns-resize;
    background: transparent;
    z-index: 8;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.home-design-section-wrapper:hover .hd-resize-handle-bottom {
    opacity: 1;
    background: rgba(var(--color-accent-rgb, 110, 64, 217), 0.2);
}

.hd-resize-handle-bottom:hover,
.hd-resize-handle-bottom:active {
    opacity: 1 !important;
    background: var(--color-accent);
}

/* Handle de resize de ancho — borde derecho */
.hd-resize-handle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 8px;
    cursor: ew-resize;
    background: transparent;
    z-index: 8;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.home-design-section-wrapper:hover .hd-resize-handle-right {
    opacity: 1;
    background: rgba(var(--color-accent-rgb, 110, 64, 217), 0.2);
}

.hd-resize-handle-right:hover,
.hd-resize-handle-right:active {
    opacity: 1 !important;
    background: var(--color-accent);
}

.home-design-section-wrapper {
    position: relative;
}

.home-design-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7280;
}

.home-design-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.home-design-empty h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #374151;
}

.home-design-empty p {
    font-size: 0.875rem;
}