/* css/creativo.css
   Estilo exclusivo de Modo Creativo: collage, textura, tipografía expresiva.
   Modo Minimalista tendrá su propio css/minimal.css con tratamiento opuesto.
*/

:root{
    --negro:      #0a0a0a;
    --crema:      #f5f2ea;
    --rosa:       #d4134a;
    --turquesa:   #74ada4;
    --amarillo:   #e5b00a;
    --texto-crema:#2a2620;
}

body.creativo{
    background: var(--negro);
    color: #fff;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    overflow-x: hidden;
}

.creativo h1,
.creativo h2,
.creativo .titular-expresivo{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.resaltado{ color: var(--rosa); }

/* ---------- utilidades de sección ---------- */
.seccion{
    position: relative;
    padding: 56px 22px 64px;
}

.seccion--negro{ background: var(--negro); color:#fff; }
.seccion--crema{ background: var(--crema); color: var(--texto-crema); }

/* Borde rasgado entre secciones, mediante un SVG de fondo repetido */
.borde-rasgado{
    position: absolute;
    left: 0; right: 0;
    height: 26px;
    background-repeat: repeat-x;
    background-size: 40px 26px;
    pointer-events: none;
}

.borde-rasgado--sube-crema{
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='0 0 40 26'%3E%3Cpolygon points='0,26 6,4 12,20 18,2 24,18 30,6 36,22 40,10 40,26' fill='%23f5f2ea'/%3E%3C/svg%3E");
}

.borde-rasgado--sube-negro{
    top: -1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='0 0 40 26'%3E%3Cpolygon points='0,26 6,4 12,20 18,2 24,18 30,6 36,22 40,10 40,26' fill='%230a0a0a'/%3E%3C/svg%3E");
}

/* Textura de rejilla sutil sobre negro */
.textura-rejilla{
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events:none;
}

/* Salpicaduras del cierre, con la misma paleta ya usada en el disco */
.textura-splatter{
    position:absolute; inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 20%, var(--rosa) 0%, rgba(212,19,74,0) 6%),
        radial-gradient(circle at 85% 15%, var(--turquesa) 0%, rgba(116,173,164,0) 7%),
        radial-gradient(circle at 20% 85%, var(--amarillo) 0%, rgba(229,176,10,0) 6%),
        radial-gradient(circle at 90% 80%, var(--rosa) 0%, rgba(212,19,74,0) 5%),
        radial-gradient(circle at 55% 92%, var(--turquesa) 0%, rgba(116,173,164,0) 5%);
    opacity:0.55;
}

/* ---------- header ---------- */
.cabecera{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 18px 20px;
    background: var(--negro);
    position:relative;
    z-index:5;
}

.cabecera .marca{
    display:flex;
    align-items:flex-end;
    gap:8px;
}

.cabecera svg{
    width: clamp(1.56rem, 9.1vw, 3.25rem);
    height: clamp(1.56rem, 9.1vw, 3.25rem);
    flex-shrink:0;
}

.cabecera .marca-nombre{
    font-family:'Instrument Sans', sans-serif;
    font-weight:700;
    font-size: clamp(0.72rem, 3.9vw, 1.36rem);
    line-height:1;
    white-space:nowrap;
    color:#fff;
}

/* ---------- hero ---------- */
.hero{
    position:relative;
    padding-top: 40px;
    padding-bottom: 34px;
}

.hero-contenido{
    position:relative;
    z-index:2;
}

.hero h1{
    font-size: clamp(2.1rem, 11vw, 2.9rem);
    color:#fff;
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.15);
}

.hero .banda{
    display:inline-block;
    margin-top:16px;
    background: var(--amarillo);
    color:#1a1400;
    font-weight:700;
    font-size: 0.95rem;
    line-height:1.35;
    padding: 8px 14px;
    transform: rotate(-1.2deg);
    clip-path: polygon(1% 8%, 99% 0%, 100% 92%, 0% 100%);
}

.hero p.texto{
    margin-top:20px;
    font-size:1.02rem;
    color:#d8d2c4;
    max-width: 30ch;
}

.cta-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:22px;
    font-weight:700;
    font-size:0.95rem;
    letter-spacing:0.02em;
    color:#fff;
    text-transform:uppercase;
    padding-bottom:4px;
    border-bottom: 2px solid var(--turquesa);
}

.hero-imagen{
    margin-top:34px;
    position:relative;
    z-index:2;
}

.hero-imagen img{
    width:100%;
    border-radius:4px;
}

.hero .adorno-x{
    position:absolute;
    z-index:1;
}

/* ---------- qué hacemos ---------- */
.que-hacemos h2{
    font-size: clamp(1.7rem, 8vw, 2.1rem);
    color: var(--texto-crema);
}

.que-hacemos .resaltado{ color: var(--turquesa); }

.que-hacemos p{
    margin-top:16px;
    font-size:0.98rem;
    line-height:1.5;
}

.que-hacemos .cierre{
    margin-top:18px;
    font-style:italic;
}

.que-hacemos .cierre .fuerte{
    display:block;
    font-weight:700;
    font-style:normal;
}

.que-hacemos .cierre .subrayado{
    border-bottom: 2px solid var(--rosa);
}

.conceptos{
    margin-top:34px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 16px;
}

.concepto{ text-align:left; }

.concepto svg{ width:38px; height:38px; }

.concepto h3{
    font-family:'Instrument Sans', sans-serif;
    text-transform:uppercase;
    font-weight:700;
    font-size:0.85rem;
    margin-top:8px;
    letter-spacing:0.01em;
}

.concepto p{
    font-size:0.82rem;
    line-height:1.4;
    margin-top:4px;
    color:#443f36;
}

/* ---------- planes ---------- */
.planes h2{
    font-size: clamp(1.5rem, 7.4vw, 1.9rem);
    color:#fff;
    border-bottom: 3px solid var(--rosa);
    display:inline-block;
    padding-bottom:6px;
}

.lista-planes{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.plan{
    position:relative;
    background:#141414;
    border:1px solid #262626;
    border-radius:6px;
    padding:22px 18px 18px;
}

.plan-etiqueta{
    display:inline-block;
    font-family:'Instrument Sans', sans-serif;
    font-weight:700;
    font-size:0.78rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#fff;
    padding:5px 14px;
    margin-bottom:14px;
    clip-path: polygon(2% 10%, 100% 0%, 98% 90%, 0% 100%);
}

.plan--basico .plan-etiqueta{ background: var(--turquesa); color:#04211c; }
.plan--profesional .plan-etiqueta{ background: var(--amarillo); color:#241b00; }
.plan--premium .plan-etiqueta{ background: var(--rosa); color:#2a0210; }

.plan-precio{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:800;
    font-size:2.4rem;
    color:#fff;
    line-height:1;
}

.plan-precio .periodo{
    font-family:'Instrument Sans', sans-serif;
    font-weight:600;
    font-size:1rem;
}

.plan--basico .plan-precio .periodo{ color: var(--turquesa); }
.plan--profesional .plan-precio .periodo{ color: var(--amarillo); }
.plan--premium .plan-precio .periodo{ color: var(--rosa); }

.plan-mensual{
    font-size:0.78rem;
    color:#9a9488;
    margin-top:2px;
}

.plan-texto{
    margin-top:14px;
    font-size:0.9rem;
    line-height:1.45;
    color:#c9c3b6;
}

.plan-pie{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#5c574c;
    font-size:0.85rem;
}

.plan-numero{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:800;
    color:#3a3630;
}

/* ---------- adaptabilidad ---------- */
.adaptabilidad h2{
    font-size: clamp(1.6rem, 7.6vw, 2rem);
    color: var(--texto-crema);
}

.adaptabilidad .resaltado{ color: var(--rosa); }

.adaptabilidad p{
    margin-top:14px;
    font-size:0.96rem;
    line-height:1.5;
}

.adaptabilidad .nota{
    margin-top:10px;
    font-weight:600;
    font-size:0.9rem;
    color: var(--turquesa);
}

.sectores{
    margin-top:30px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:18px;
}

.sector-foto{
    background:#fff;
    padding:8px 8px 30px;
    box-shadow:0 6px 14px rgba(0,0,0,0.18);
    transform: rotate(-1.5deg);
}

.sector-foto:nth-child(2n){ transform: rotate(1.3deg); }

.sector-foto .marco{
    aspect-ratio: 4/5;
    background:
        repeating-linear-gradient(45deg, #e4e0d6 0 8px, #ece8dd 8px 16px);
    border:1px dashed #b9b2a2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8c8574;
    font-size:0.7rem;
    text-align:center;
    padding:6px;
}

.sector-foto .etiqueta{
    display:block;
    text-align:center;
    margin-top:8px;
    font-family:'Instrument Sans', sans-serif;
    font-weight:700;
    font-size:0.72rem;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:#2a2620;
}

/* ---------- cierre ---------- */
.cierre{
    text-align:center;
}

.cierre h2{
    font-size: clamp(1.5rem, 7.4vw, 1.9rem);
    color:#fff;
    border-bottom:3px solid var(--turquesa);
    display:inline-block;
    padding-bottom:6px;
}

.cierre p{
    position:relative;
    z-index:2;
    margin-top:16px;
    font-size:0.98rem;
    color:#d8d2c4;
}

.cierre .cta-caja{
    position:relative;
    z-index:2;
    display:inline-block;
    margin-top:26px;
    border:1.5px solid #fff;
    padding:14px 26px;
    font-weight:700;
    text-transform:uppercase;
    font-size:0.9rem;
    letter-spacing:0.02em;
}

/* ---------- footer ---------- */
.pie{
    background:var(--negro);
    padding:26px 20px 34px;
    text-align:center;
}

.pie .marca{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
}

.pie .marca-nombre{
    font-family:'Instrument Sans', sans-serif;
    font-weight:700;
    font-size:0.75rem;
    color:#fff;
}

.pie nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    font-size:0.75rem;
    color:#a39c8f;
    margin-bottom:16px;
}

.pie .redes{
    display:flex;
    justify-content:center;
    gap:16px;
}

.pie .redes svg{ width:20px; height:20px; }