/* Componente de Círculos - Vivero El Avellano */

/* Variables del componente */
:root {
    --circle-primary: #1e3a2b;
    --circle-success: #6b8e23;
    --circle-gray-50: #faf9f7;
    --circle-gray-600: #5c5449;
    --circle-gray-700: #3d3529;
    --circle-shadow-soft: 0 2px 8px rgba(30, 58, 43, 0.1);
    --circle-shadow-medium: 0 4px 12px rgba(30, 58, 43, 0.15);
    --circle-gradient-sage: linear-gradient(135deg, #87a96b 0%, #6b8e23 100%);
}

/* Contenedor principal del componente */
.why-choose-section {
    background: linear-gradient(135deg, var(--circle-gray-50) 0%, rgba(135, 169, 107, 0.05) 100%);
    padding-block: clamp(4.5rem, 8.5vh, 10rem);
    padding-inline: 1.5rem;
    position: relative;
}

.why-choose-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Título centrado como antes */
.why-choose-intro {
    max-width: 800px;
    margin: 0 auto 2rem;
    text-align: center;
}

.why-choose-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--circle-primary);
    margin-bottom: 2rem;
}

.why-choose-intro p {
    font-size: 1.1rem;
    color: var(--circle-gray-700);
    line-height: 1.7;
}

/* Layout de dos columnas para desktop */
.why-choose-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

/* Columna de texto */
.why-choose-text {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-text p {
    font-size: 1.1rem;
    color: var(--circle-gray-700);
    line-height: 1.7;
    margin: 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1.5rem;
    box-shadow: var(--circle-shadow-soft);
    border-left: 4px solid var(--circle-success);
}

/* Columna visual (círculos) */
.why-choose-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.why-choose-content {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    /* Altura aumentada para acomodar círculos más grandes */
    height: clamp(850px, 95vh, 1100px);
    display: grid;
    place-items: center;
    overflow: visible;
}

/* SVG para líneas de conexión */
.why-choose-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.conn {
    stroke: var(--circle-success);
    stroke-width: 3;
    opacity: 0.7;
    stroke-dasharray: 20, 15;
    stroke-linecap: round;
    animation: flowLine 3s linear infinite;
}

/* Líneas curvas en móvil */
@media (max-width: 768px) {
    .conn {
        stroke-width: 2.5;
        stroke-dasharray: 15, 12;
    }
}

/* Animación de flujo para las líneas */
@keyframes flowLine {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -35;
    }
}

/* Diferentes velocidades para cada línea */
.conn:nth-child(1) { animation-delay: 0s; }
.conn:nth-child(2) { animation-delay: 0.5s; }
.conn:nth-child(3) { animation-delay: 1s; }
.conn:nth-child(4) { animation-delay: 1.5s; }

/* Círculo central */
.central-circle {
    grid-area: cc;
    width: clamp(220px, 26vmin, 280px);
    height: clamp(220px, 26vmin, 280px);
    background: var(--circle-gradient-sage);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--circle-shadow-medium);
    z-index: 10;
    position: relative;
    padding: 1rem;
}

.central-circle::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: white;
    border-radius: 50%;
    z-index: -1;
}

.central-text {
    text-align: center;
    z-index: 2;
}

.central-number {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--circle-success);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.central-label {
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    color: var(--circle-gray-600);
    font-weight: 600;
}

.central-subtitle {
    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
    color: var(--circle-gray-700);
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0.25rem;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Grid de cuadrantes */
.quadrants-container {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-areas:
        "tl . tr"
        ".  cc ."
        "bl . br";
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: clamp(0.2rem, 0.6vw, 0.6rem) clamp(0.2rem, 0.6vw, 0.6rem);
    z-index: 5;
    padding: 1rem;
}

/* Cuadrantes individuales */
.quadrant {
    width: clamp(180px, 20vmin, 240px);
    height: clamp(180px, 20vmin, 240px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: var(--circle-shadow-soft);
    padding: 1.2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(135, 169, 107, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    overflow: hidden;
}

/* Animaciones escalonadas para los cuadrantes */
.quadrant:nth-child(1) { animation-delay: 0s; }
.quadrant:nth-child(2) { animation-delay: 0.08s; }
.quadrant:nth-child(3) { animation-delay: 0.16s; }
.quadrant:nth-child(4) { animation-delay: 0.24s; }

.quadrant:hover {
    transform: translateY(-4px);
    box-shadow: var(--circle-shadow-medium);
    border-color: var(--circle-success);
    background: white;
}

.quadrant:hover .quadrant-icon {
    color: var(--circle-success);
}

.quadrant-icon {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    transition: all 0.3s ease;
    display: block;
    color: var(--circle-gray-600);
    flex-shrink: 0;
}

.quadrant-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quadrant-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    font-weight: 600;
    color: var(--circle-primary);
    line-height: 1.1;
    margin: 0;
}

.quadrant-text {
    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
    color: var(--circle-gray-700);
    line-height: 1.2;
    margin: 0;
}

/* Posicionamiento de los cuadrantes con grid */
.quadrant.top-left {
    grid-area: tl;
}

.quadrant.top-right {
    grid-area: tr;
}

.quadrant.bottom-right {
    grid-area: br;
}

.quadrant.bottom-left {
    grid-area: bl;
}

/* Responsive */
@media (max-width: 1024px) {
    .why-choose-content {
        height: clamp(800px, 90vh, 1000px);
    }
    
    .quadrants-container {
        gap: clamp(0.3rem, 1vw, 1rem) clamp(0.3rem, 0.8vw, 1rem);
    }
    
    .quadrant {
        width: clamp(230px, 28.8vmin, 288px);
        height: clamp(230px, 28.8vmin, 288px);
        padding: 1.1rem;
    }
    
    .central-circle {
        width: clamp(240px, 28vmin, 300px);
        height: clamp(240px, 28vmin, 300px);
        padding: 1.2rem;
    }
    
    .central-number {
        font-size: 2.5rem;
    }
}

/* Responsive - Desktop con distribución 40%/60% */
@media (min-width: 992px) {
    .why-choose-layout {
        grid-template-columns: 40% 60%;
        gap: 2rem;
        align-items: flex-start;
    }
    
    .why-choose-text {
        padding-right: 1rem;
    }
    
    .why-choose-visual {
        justify-content: center;
        padding-left: 0;
        overflow: visible;
    }
    
    .why-choose-content {
        max-width: 100%;
        width: 100%;
        height: clamp(900px, 100vh, 1200px);
        min-height: 900px;
        overflow: visible;
        transform: scale(0.85);
        transform-origin: center center;
    }
    
    .quadrants-container {
        padding: 1.5rem 0.5rem;
    }
}

/* Ajuste para pantallas medianas-grandes donde hay más espacio */
@media (min-width: 1200px) {
    .why-choose-content {
        transform: scale(1);
    }
    
    .quadrants-container {
        padding: 2rem 1rem;
    }
}

@media (max-width: 991px) {
    .why-choose-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .why-choose-text {
        text-align: center;
        padding-right: 0;
    }
    
    .why-choose-visual {
        justify-content: center;
        padding-left: 0;
    }
    
    .why-choose-content {
        height: clamp(900px, 100vh, 1100px);
        width: 100%;
        max-width: 800px;
    }
    
    .quadrants-container {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .why-choose-layout {
        gap: 2rem;
    }
    
    .why-choose-text {
        text-align: center;
    }
    
    .why-choose-text p {
        padding: 1.5rem;
        font-size: 1rem;
    }
    
    .why-choose-content {
        height: auto;
        padding: 1rem 0;
    }
    
    .quadrants-container {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        margin-top: 2rem;
        display: grid;
        grid-template-areas:
            "tl tr"
            "cc cc"
            "bl br";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 1.1rem;
        align-items: center;
        justify-items: center;
    }
    
    .quadrant {
        position: static;
        width: clamp(202px, 28.8vmin, 259px);
        height: clamp(202px, 28.8vmin, 259px);
        margin: 0 auto;
        border-radius: 50%;
        padding: 1.3rem;
    }
    
    .central-circle {
        grid-area: cc;
        width: clamp(260px, 35vmin, 340px);
        height: clamp(260px, 35vmin, 340px);
        margin: 2rem auto;
        padding: 1.5rem;
    }
    
    .central-circle::before {
        top: 7.5px;
        left: 7.5px;
        right: 7.5px;
        bottom: 7.5px;
    }
    
    .central-number {
        font-size: 2.6rem;
    }
    
    .why-choose-svg {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    
    .quadrant-icon {
        font-size: 1.25rem;
    }
    
    .quadrant-title {
        font-size: 0.75rem;
        line-height: 1.1;
    }
    
    .quadrant-text {
        font-size: 0.65rem;
        line-height: 1.1;
    }
}