/* Theme Name: Danilion Contact Styles v3 (Foto Manager + Mobile Fix) */

/* --- Layout Principal --- */
.contact-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .contact-grid-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- Tarjetas de Datos --- */
.contact-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #111;
    border: 1px solid #222;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    
    /* FIX MOBILE SCROLL */
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap; /* Permite que el texto baje si es muy largo */
}

.contact-card.clickable:hover {
    border-color: var(--accent);
    background: #151515;
    transform: translateX(5px);
    cursor: pointer;
}

/* Estilo del Círculo (Contenedor) */
.c-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px; /* Tamaño unificado */
    height: 55px;
    background: #000;
    border-radius: 50%;
    border: 1px solid #333;
    color: var(--accent);
    flex-shrink: 0;
    overflow: hidden; /* Importante para la foto */
}

/* NUEVO: Estilos específicos cuando hay una foto */
.c-icon.has-image {
    padding: 0; /* Quitamos padding para que la foto llene el círculo */
    border-color: rgba(255,255,255,0.2); /* Borde más sutil */
}

.c-icon.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La foto se adapta sin deformarse */
    display: block;
}

/* Estilo para los iconos SVG normales */
.c-icon svg {
    width: 24px;
    height: 24px;
}

/* Contenedor de textos */
.contact-card > div:last-child {
    flex: 1;
    min-width: 0;
}

.contact-card h3 {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: #888;
    letter-spacing: 1px;
}

.contact-card p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
    word-break: break-word; /* Evita que emails largos rompan el diseño en móvil */
}

@media (max-width: 480px) {
    .contact-card p { font-size: 1rem; }
    .c-icon { width: 50px; height: 50px; }
}

/* --- Formulario --- */
.danilion-form {
    background: #111;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #222;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 100%;
    box-sizing: border-box;
}

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block; margin-bottom: 8px; font-size: 0.85rem;
    color: #888; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
}

.danilion-form input, .danilion-form textarea {
    width: 100%; background: #000; border: 1px solid #333;
    padding: 15px; color: #fff; font-family: inherit; font-size: 1rem;
    border-radius: 4px; outline: none; transition: 0.3s; box-sizing: border-box;
}

.danilion-form input:focus, .danilion-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(255, 51, 0, 0.2);
}

.danilion-form button {
    cursor: pointer; font-size: 1.1rem; transition: 0.3s;
    margin-top: 10px; width: 100%;
}