/*
 * Clipped Shapes - Rectángulos con esquina cortada
 * Usa SVG de Figma para lograr bordes cerrados con la esquina recortada
 * Formas estandarizadas según el diseño oficial
 */

/* ==============================================
   BOTONES PEQUEÑOS - 56x40px
   Para: Idioma, redes sociales
   SVG: viewBox="0 0 56 40"
   Path: M0.5 39.5 L0.5 0.5 L55.5 0.5 L55.5 31.793 L47.793 39.5 Z
   ============================================== */

.clipped-btn-sm {
    position: relative;
    width: 56px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    /* SVG con borde naranja, fondo transparente */
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23EB8825' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.clipped-btn-sm:hover {
    /* SVG con fondo naranja lleno */
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23EB8825' fill='%23EB8825'/%3E%3C/svg%3E");
}

/* Variante blanca */
.clipped-btn-sm.white {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23FFFFFF' fill='none'/%3E%3C/svg%3E");
}

.clipped-btn-sm.white:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23FFFFFF' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* Variante violeta */
.clipped-btn-sm.violet {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%236135F6' fill='none'/%3E%3C/svg%3E");
}

.clipped-btn-sm.violet:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%236135F6' fill='%236135F6'/%3E%3C/svg%3E");
}

/* Variante negra */
.clipped-btn-sm.black {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%232A2A2A' fill='none'/%3E%3C/svg%3E");
}

.clipped-btn-sm.black:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%232A2A2A' fill='%232A2A2A'/%3E%3C/svg%3E");
}

/* ==============================================
   TARJETAS - 616x351px
   Para: Service cards, Industry cards
   SVG: viewBox="0 0 616 351"
   Path: M0.5 350.5 L0.5 1 L615.5 1 L615.5 305.456 L569.209 350.5 Z
   ============================================== */

/* Tarjeta con borde negro (para servicios) */
.clipped-card {
    position: relative;
    width: 100%;
    aspect-ratio: 616/351;
    transition: all 0.3s ease;
    /* SVG con borde negro, fondo blanco */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='white' stroke='%232A2A2A'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.clipped-card:hover {
    /* SVG con fondo naranja lleno */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%23EB8825' stroke='%23EB8825'/%3E%3C/svg%3E");
}

/* Tarjeta con fondo naranja (para industries/partners) */
.clipped-card-orange {
    position: relative;
    width: 100%;
    aspect-ratio: 616/351;
    transition: all 0.3s ease;
    /* SVG con fondo naranja */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%23EB8825' stroke='%23EB8825'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.clipped-card-orange:hover {
    /* SVG con fondo negro lleno */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%232A2A2A' stroke='%232A2A2A'/%3E%3C/svg%3E");
}

/* Tarjeta con borde gris claro (variante) */
.clipped-card-light {
    position: relative;
    width: 100%;
    aspect-ratio: 616/351;
    transition: all 0.3s ease;
    /* SVG con borde gris */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='white' stroke='%23E6E6E6'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.clipped-card-light:hover {
    /* SVG con fondo naranja lleno */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%23EB8825' stroke='%23EB8825'/%3E%3C/svg%3E");
}

/* ==============================================
   ESQUINA CON ÍCONO - 112x112px
   Para: Iconos en esquina superior izquierda
   SVG de Figma con forma cuadrada recortada
   ============================================== */

.clipped-corner-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* SVG de Figma 112x112 - esquina naranja */
    background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 88L88 112L0 112L0 0L112 0L112 88Z' fill='%23EB8825'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Variante violeta */
.clipped-corner-icon.violet {
    background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 88L88 112L0 112L0 0L112 0L112 88Z' fill='%236135F6'/%3E%3C/svg%3E");
}

/* Variante negra */
.clipped-corner-icon.black {
    background-image: url("data:image/svg+xml,%3Csvg width='112' height='112' viewBox='0 0 112 112' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 88L88 112L0 112L0 0L112 0L112 88Z' fill='%232A2A2A'/%3E%3C/svg%3E");
}

/* ==============================================
   SECCIONES COMPLETAS
   Para: Divisores de sección con esquina cortada
   Usa preserveAspectRatio='none' para escalar
   ============================================== */

.clipped-section {
    position: relative;
    width: 100%;
    min-height: 400px;
}

.clipped-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    /* SVG escalable con fondo negro */
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%232A2A2A'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Variante con fondo gris */
.clipped-section.bg-gray::before {
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%23F5F5F5'/%3E%3C/svg%3E");
}

/* Variante con fondo naranja */
.clipped-section.bg-orange::before {
    background-image: url("data:image/svg+xml,%3Csvg width='616' height='351' viewBox='0 0 616 351' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0.5 350.5L0.5 1L615.5 1L615.5 305.456L569.209 350.5L0.5 350.5Z' fill='%23EB8825'/%3E%3C/svg%3E");
}

/* ==============================================
   BOTONES MEDIANOS Y GRANDES
   Escalados proporcionalmente del botón pequeño
   ============================================== */

/* Botón mediano - 112x80px (2x el tamaño pequeño) */
.clipped-btn-md {
    position: relative;
    width: 112px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    /* Usa el mismo SVG escalado */
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23EB8825' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.clipped-btn-md:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23EB8825' fill='%23EB8825'/%3E%3C/svg%3E");
}

/* Botón grande - 168x120px (3x el tamaño pequeño) */
.clipped-btn-lg {
    position: relative;
    width: 168px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    /* Usa el mismo SVG escalado */
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23EB8825' fill='none' stroke-width='0.7'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.clipped-btn-lg:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='40' viewBox='0 0 56 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 39.5L0.5 0.5L55.5 0.5L55.5 31.793L47.793 39.5L0.5 39.5Z' stroke='%23EB8825' fill='%23EB8825' stroke-width='0.7'/%3E%3C/svg%3E");
}

/* ==============================================
   RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .clipped-btn-lg {
        width: 140px;
        height: 100px;
    }

    .clipped-btn-md {
        width: 98px;
        height: 70px;
    }

    .clipped-corner-icon {
        width: 80px;
        height: 58px;
    }
}

@media (max-width: 480px) {
    .clipped-btn-lg {
        width: 112px;
        height: 80px;
    }

    .clipped-btn-md {
        width: 84px;
        height: 60px;
    }

    .clipped-corner-icon {
        width: 70px;
        height: 50px;
    }
}
