/* ===== VARIABLES: colores de marca ===== */
:root {
  --naranja: #FF6B00;
  --cian: #00B8D9;
  --gris-claro: #F5F6F8;
  --blanco: #FFFFFF;
  --noche: #0B1020; /* azul oscuro del carrusel */
}

/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; }
button { font-family: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; } /* al saltar a una sección, no la tapa la barra fija */
img { max-width: 100%; }

/* ===== BARRA SUPERIOR ===== */
.barra { background: var(--blanco); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 15px rgba(0,0,0,0.06); }
nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 5%; flex-wrap: wrap; gap: 8px; }
.logo img { height: 80px; width: auto; display: block; } /* logo grande */
.menu { list-style: none; display: flex; gap: 26px; flex-wrap: wrap; }
.menu a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s; }
.menu a:hover { color: var(--naranja); }

/* ===== BOTÓN PRINCIPAL ===== */
.boton-cta {
  display: inline-block; background: linear-gradient(135deg, var(--naranja), #ff9a3c); color: var(--blanco);
  padding: 15px 35px; border-radius: 30px; text-decoration: none; font-weight: bold;
  box-shadow: 0 8px 25px rgba(255,107,0,0.4); transition: transform 0.3s, box-shadow 0.3s;
}
.boton-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,184,217,0.5); }

/* ===== CARRUSEL ===== */
.carrusel { position: relative; background: var(--noche); min-height: 380px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 45px 5% 70px 5%; }
.brillo { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; z-index: 0; }
.brillo-naranja { width: 380px; height: 380px; background: var(--naranja); top: -120px; left: -80px; }
.brillo-cian { width: 380px; height: 380px; background: var(--cian); bottom: -140px; right: -80px; }

.slide { position: absolute; max-width: 760px; padding: 0 5%; opacity: 0; transform: translateY(20px); transition: opacity 0.8s, transform 0.8s; pointer-events: none; z-index: 1; }
.slide.activo { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; }
.slide h1 { font-size: 2.4rem; color: var(--blanco); margin-bottom: 18px; line-height: 1.2; }
.slide p { color: #c9d1e6; font-size: 1.05rem; margin-bottom: 24px; line-height: 1.5; }

.puntos { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.punto { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.3); cursor: pointer; transition: all 0.3s; }
.punto.activo { background: var(--naranja); width: 28px; border-radius: 10px; }

/* ===== APARICIÓN SUAVE ===== */
.aparecer { opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; }
.aparecer.visible { opacity: 1; transform: translateY(0); }

/* ===== TÍTULOS Y SUBTÍTULOS DE SECCIÓN ===== */
section h2 { font-size: 2rem; color: #222; margin-bottom: 15px; text-align: center; }
.subtitulo { text-align: center; color: #555; max-width: 600px; margin: 0 auto 40px auto; }

/* ===== PARA QUIÉN ===== */
.para-quien { padding: 40px 5%; text-align: center; background: var(--blanco); }
.para-quien-titulo { color: #777; font-size: 0.95rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; }
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: 900px; margin: 0 auto; }
.chips span { background: var(--gris-claro); padding: 10px 18px; border-radius: 25px; color: #333; font-size: 0.95rem; }

/* ===== SERVICIOS ===== */
.soluciones { padding: 60px 5%; background: var(--gris-claro); }
.tarjetas-soluciones { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.tarjeta-solucion {
  background: var(--blanco); border-radius: 20px; padding: 35px 25px; flex: 1 1 260px; max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); text-align: left; position: relative; overflow: hidden;
  display: block; text-decoration: none; color: inherit; border: 2px solid transparent;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.tarjeta-solucion:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,184,217,0.2); border-color: var(--cian); }
.icono-solucion { font-size: 2.2rem; display: block; margin-bottom: 15px; }
.tarjeta-solucion h3 { color: #222; margin-bottom: 10px; font-size: 1.2rem; }
.tarjeta-solucion p { color: #555; font-size: 0.92rem; margin-bottom: 20px; line-height: 1.5; }
.precio { display: block; font-weight: bold; color: var(--naranja); }
.precio small { display: block; font-weight: normal; color: #888; font-size: 0.75rem; }
.tarjeta-destacada { border: 2px solid var(--naranja); }
.contenido-tarjeta { position: relative; }
.insignia { position: absolute; top: -18px; right: -12px; background: var(--naranja); color: var(--blanco); font-size: 0.7rem; font-weight: bold; padding: 4px 12px; border-radius: 20px; }

/* ===== CÓMO TRABAJAMOS ===== */
.como { padding: 60px 5%; text-align: center; }
.pasos { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; max-width: 1000px; margin: 40px auto 0 auto; }
.paso { flex: 1 1 200px; max-width: 230px; }
.numero { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--naranja), var(--cian)); color: var(--blanco); font-weight: bold; font-size: 1.2rem; margin-bottom: 12px; }
.paso h3 { color: #222; margin-bottom: 8px; }
.paso p { color: #555; font-size: 0.92rem; line-height: 1.5; }

/* ===== POR QUÉ ORCORE ===== */
.por-que { padding: 60px 5%; }
.beneficios { display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; max-width: 1000px; margin: 40px auto 0 auto; }
.beneficio { flex: 1 1 200px; max-width: 230px; text-align: center; padding: 25px 15px; background: var(--gris-claro); border-radius: 16px; }
.beneficio span { font-size: 2rem; }
.beneficio h3 { color: var(--naranja); margin: 10px 0 6px 0; font-size: 1.05rem; }
.beneficio p { color: #555; font-size: 0.9rem; line-height: 1.5; }

/* ===== PREGUNTAS FRECUENTES ===== */
.faq { padding: 40px 5% 60px 5%; max-width: 760px; margin: 0 auto; }
.faq details { background: var(--gris-claro); border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
.faq summary { cursor: pointer; font-weight: 600; color: #222; }
.faq details[open] summary { color: var(--naranja); margin-bottom: 8px; }
.faq details p { color: #555; line-height: 1.6; }

/* ===== QUIÉN ESTÁ DETRÁS ===== */
.quien { padding: 70px 5%; background: var(--gris-claro); }
.quien-contenido { display: flex; align-items: center; justify-content: center; gap: 60px; max-width: 900px; margin: 0 auto; }
.foto-marco { width: 240px; height: 240px; flex-shrink: 0; border-radius: 50%; padding: 5px; background: linear-gradient(135deg, var(--naranja), var(--cian)); box-shadow: 0 15px 40px rgba(0,184,217,0.3); overflow: hidden; }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.quien-texto h2 { text-align: left; font-size: 1.8rem; }
.quien-texto p { color: #555; line-height: 1.6; margin-bottom: 15px; }
.quien-texto .lema { font-weight: bold; color: var(--naranja); }

/* ===== LLAMADO FINAL ===== */
.cta-final { background: var(--noche); text-align: center; padding: 70px 5%; }
.cta-final h2 { color: var(--blanco); }
.cta-final p { color: #c9d1e6; margin-bottom: 28px; }

/* ===== PIE DE PÁGINA (claro, para que el logo se vea natural, sin pastilla) ===== */
.footer { background: var(--gris-claro); color: #555; padding: 50px 5% 20px 5%; border-top: 1px solid #E3E5EA; }
.footer-contenido { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; max-width: 1100px; margin: 0 auto 30px auto; }
.logo-footer { height: 80px; width: auto; display: block; margin-bottom: 12px; }
.footer-logo p { color: #666; font-size: 0.9rem; max-width: 260px; }
.footer h4 { color: #222; margin-bottom: 12px; }
.footer p { margin-bottom: 8px; }
.footer a { color: #555; text-decoration: none; transition: color 0.3s; }
.footer a:hover { color: var(--naranja); }
.footer-copy { text-align: center; font-size: 0.8rem; color: #888; border-top: 1px solid #DADDE3; padding-top: 20px; }

/* ===== PÁGINA DE PLANTILLAS ===== */
.plantillas-titulo { text-align: center; padding: 60px 5% 20px 5%; }
.plantillas-titulo h1 { font-size: 2.2rem; color: #222; margin-bottom: 10px; }
.plantillas-titulo p { color: #555; max-width: 600px; margin: 0 auto; }
.bloque-plantillas { padding: 40px 5% 60px 5%; text-align: center; }
.bloque-plantillas.gris { background: var(--gris-claro); }
.etiqueta-gratis, .etiqueta-pago { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: bold; margin-bottom: 12px; }
.etiqueta-gratis { background: rgba(0,184,217,0.15); color: #008aa3; }
.etiqueta-pago { background: rgba(255,107,0,0.15); color: var(--naranja); }
.boton-secundario { display: inline-block; margin-top: 10px; padding: 10px 24px; border-radius: 25px; border: 2px solid var(--naranja); color: var(--naranja); text-decoration: none; font-weight: bold; transition: all 0.3s; }
.boton-secundario:hover { background: var(--naranja); color: var(--blanco); }
.vacio { color: #888; }

/* ===== RESPONSIVO ===== */
@media (max-width: 900px) {
  .quien-contenido { flex-direction: column; text-align: center; }
  .quien-texto h2 { text-align: center; }
}
@media (max-width: 768px) {
  nav { justify-content: center; padding: 6px 5%; }
  .logo img { height: 64px; } /* en celular el logo es un poco menor para que la barra fija no ocupe tanto */
  .menu { gap: 14px; font-size: 0.85rem; justify-content: center; }
  .slide h1 { font-size: 1.8rem; }
  .carrusel { min-height: 500px; }
  .footer-contenido { flex-direction: column; text-align: center; align-items: center; }
}


/* ===== SECCIÓN DEL BANNER DE PORTAFOLIO (contenedor) ===== */
/* Título pequeño de una sola línea (así el banner cabe completo en la pantalla) */
.proyectos-banner { padding: 22px 5% 18px 5%; background: var(--blanco); }
.etiqueta-seccion { text-align: center; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--naranja); font-size: 0.8rem; margin-bottom: 4px; }

/* =====================================================================
   BANNER DE PORTAFOLIO (carrusel de proyectos hecho en código)
   Todo empieza con "oc-" para no chocar con el resto de estilos.
   ===================================================================== */
/* =====================================================================
   PORTAFOLIO OrCore — todo empieza con "oc-" para no chocar con
   los estilos que ya tiene la página.
   ===================================================================== */

/* ----- Colores del banner (sacados de la imagen y de la app) ----- */
.oc-portafolio{
  --oc-fondo1:#0F1A45;     /* azul más oscuro (esquinas) */
  --oc-fondo2:#1E2A5E;     /* azul marino de la app */
  --oc-azul:#1E2A5E;       /* encabezados dentro de las pantallas */
  --oc-azul2:#2C3C80;      /* pestañas dentro de las pantallas */
  --oc-amarillo:#FFC72C;   /* tarjeta de ganancia */
  --oc-rojo:#D7262B;       /* botones de la app */
  --oc-naranja:#FF6A13;    /* brillo de la esquina inferior izquierda */
  --oc-cian:#16B8E0;       /* brillo de la esquina superior derecha */
  --oc-gris:#EEF0F7;       /* fondo de las pantallas */
  max-width:1000px;margin:0 auto;padding:12px;
  font-family:'Barlow',system-ui,sans-serif;
}

/* Las medidas incluyen el relleno y el borde (así nada se sale) */
.oc-portafolio, .oc-portafolio *{box-sizing:border-box}

/* ----- Carrusel: se desliza de lado con el dedo ----- */
.oc-pista{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;            /* sin barra fea (Firefox) */
}
.oc-pista::-webkit-scrollbar{display:none} /* sin barra fea (Chrome/Safari) */

/* ----- Cada banner ----- */
.oc-slide{
  flex:0 0 100%;scroll-snap-align:center;position:relative;overflow:hidden;
  border-radius:28px;aspect-ratio:2.2/1;           /* misma forma que la imagen */
  background:
    radial-gradient(60% 70% at 0% 100%, rgba(255,106,19,.55), transparent 60%),   /* brillo naranja abajo izq. */
    radial-gradient(45% 55% at 100% 0%, rgba(22,184,224,.45), transparent 60%),   /* brillo cian arriba der. */
    linear-gradient(135deg, var(--oc-fondo1), var(--oc-fondo2) 55%, var(--oc-fondo1));
  color:#fff;display:flex;flex-direction:column;align-items:center;
  padding:3.2cqw 16px 0;
  container-type:inline-size;   /* lo de adentro se mide con el ancho del banner */
}
/* Marco interior oscuro, como en la imagen (deja ver el brillo solo en los bordes) */
.oc-slide::before{
  content:'';position:absolute;inset:clamp(6px,1vw,12px);border-radius:22px;
  background:linear-gradient(160deg, rgba(15,26,69,.92), rgba(30,42,94,.9));pointer-events:none;
}
.oc-slide > *{position:relative} /* todo queda encima del marco */

/* ----- Textos del banner ----- */
.oc-titulo{
  font-family:'Outfit',sans-serif;font-weight:700;margin:0;text-align:center;
  font-size:3.6cqw;line-height:1.1;letter-spacing:-.01em;
}
.oc-sub{
  font-family:'Outfit',sans-serif;font-weight:400;margin:.4em 0 0;text-align:center;
  font-size:1.8cqw;color:#D6DBF5;
}

/* ----- Zona de los celulares ----- */
.oc-escena{
  flex:1;width:100%;display:flex;justify-content:center;align-items:flex-start;
  gap:6cqw;padding-top:2.4cqw;
  --tel:15.5cqw;   /* ANCHO de cada celular (en % del banner): todo lo de adentro crece o se encoge con él */
}

/* ----- Íconos flotantes (vidrio con brillo) ----- */
.oc-icono{
  position:absolute;width:4.6cqw;aspect-ratio:1;border-radius:14px;
  display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(120,200,255,.45);
  box-shadow:0 0 18px rgba(22,184,224,.35);backdrop-filter:blur(4px);
}
.oc-icono svg{width:58%;height:58%}
.oc-i1{left:22%;top:8%}    /* gráfica */
.oc-i2{left:13%;top:58%}   /* nube */
.oc-i3{right:13%;top:40%}  /* dinero */
.oc-i4{right:24%;top:78%}  /* inventario */

/* ----- Celular ----- */
.oc-tel{
  width:var(--tel);aspect-ratio:9/18.5;flex:0 0 auto;
  font-size:calc(var(--tel) * .046);           /* letra de la pantalla, proporcional al celular */
  background:#16171C;border-radius:calc(var(--tel) * .16);
  padding:calc(var(--tel) * .035);
  box-shadow:0 0 0 2px #3A3D48 inset, 0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(22,184,224,.18);
}
.oc-tel.izq{transform:rotate(-7deg) translateY(3%)}  /* inclinado como en la imagen */
.oc-tel.der{transform:rotate(7deg)}
.oc-pantalla{
  height:100%;border-radius:calc(var(--tel) * .13);overflow:hidden;position:relative;
  background:var(--oc-gris);color:#1A1D2B;display:flex;flex-direction:column;
}
/* La "isla" negra de arriba */
.oc-pantalla::before{
  content:'';position:absolute;top:1.5%;left:50%;transform:translateX(-50%);
  width:30%;height:3.2%;background:#16171C;border-radius:99px;z-index:2;
}

/* ----- Elementos de la app dentro de la pantalla (todo en "em" para escalar) ----- */
.oc-app-top{background:var(--oc-azul);color:#fff;padding:2.6em .9em .5em;font:700 1.25em 'Barlow Condensed',sans-serif}
.oc-tabs{display:flex;background:var(--oc-azul2);font:600 .85em 'Barlow',sans-serif}
.oc-tabs span{flex:1;text-align:center;padding:.55em 0;color:#C9CEEA;border-bottom:.25em solid transparent}
.oc-tabs .on{color:#fff;border-bottom-color:var(--oc-amarillo)}
.oc-cuerpo{padding:.7em;display:flex;flex-direction:column;gap:.55em;flex:1}
.oc-chips{display:flex;gap:.35em}
.oc-chips span{background:#DDE2F4;color:var(--oc-azul);border-radius:2em;padding:.3em .6em;font-weight:600;font-size:.8em;white-space:nowrap}
.oc-chips .on{background:var(--oc-azul);color:#fff}
.oc-ganancia{background:var(--oc-amarillo);border-radius:.8em;padding:.7em .8em;color:var(--oc-azul)}
.oc-ganancia small{display:block;font-size:.8em;font-weight:600}
.oc-ganancia b{font:700 1.6em 'Barlow Condensed',sans-serif}
.oc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45em}
.oc-kpi{background:#fff;border-radius:.7em;padding:.55em .6em}
.oc-kpi small{display:block;font-size:.72em;color:#666B88}
.oc-kpi b{font:700 1.15em 'Barlow Condensed',sans-serif}
.oc-btn{background:var(--oc-azul);color:#fff;border-radius:.5em;padding:.5em;text-align:center;font-weight:600;font-size:.85em}

/* Planilla */
.oc-grupo{background:#fff;border-radius:.7em;overflow:hidden}
.oc-grupo h4{margin:0;background:#E8EBF7;color:var(--oc-azul);padding:.45em .7em;font:700 .95em 'Barlow Condensed',sans-serif}
.oc-fila{display:grid;grid-template-columns:1fr repeat(3,2.6em);gap:.3em;align-items:end;padding:.45em .6em;border-top:1px solid #E4E6EF}
.oc-fila b{font-size:.82em}
.oc-fila b small{display:block;font-weight:500;color:#666B88;font-size:.85em}
.oc-fila > span{display:block}            /* cada casilla ocupa su columna completa */
.oc-caja{display:block;border:1px solid #D5D8E5;border-radius:.35em;text-align:center;font-size:.8em;padding:.3em 0;background:#fff}
.oc-caja.calc{background:#F2F3F7;color:#555}
.oc-mini{font-size:.6em;color:#666B88;text-align:center;display:block;margin-bottom:.15em}
.oc-destapar{display:flex;align-items:center;justify-content:space-between;padding:.4em .6em;background:#F2F3F7;font-size:.78em}
.oc-destapar i{font-style:normal;background:var(--oc-azul);color:#fff;border-radius:.35em;padding:.15em .55em;font-weight:700}
.oc-barra{margin-top:auto;background:#fff;border-top:1px solid #DADCE8;display:flex;justify-content:space-between;align-items:center;padding:.6em .8em}
.oc-barra small{display:block;color:#666B88;font-size:.75em}
.oc-barra b{font:700 1.15em 'Barlow Condensed',sans-serif}
.oc-barra span.g{background:var(--oc-rojo);color:#fff;border-radius:.5em;padding:.45em .7em;font-weight:600;font-size:.8em}

/* =====================================================================
   PROYECTO 2: APP PARA JOYERÍA (negro y dorado)
   ===================================================================== */
.oc-slide.oc-joyeria{
  background:
    radial-gradient(60% 70% at 0% 100%, rgba(212,170,70,.6), transparent 60%),    /* brillo dorado abajo izq. */
    radial-gradient(45% 55% at 100% 0%, rgba(255,226,150,.4), transparent 60%),   /* brillo dorado claro arriba der. */
    linear-gradient(135deg,#0B0B0B,#1A1712 55%,#0B0B0B);
}
.oc-slide.oc-joyeria::before{background:linear-gradient(160deg, rgba(10,10,10,.95), rgba(26,22,15,.93))}
.oc-joyeria .oc-sub{color:#E6CF8F}
.oc-joyeria .oc-icono{border-color:rgba(230,190,90,.5);box-shadow:0 0 18px rgba(212,170,70,.35);color:#F2D98A}
.oc-joyeria .oc-tel{box-shadow:0 0 0 2px #3A3528 inset, 0 30px 60px rgba(0,0,0,.6), 0 0 40px rgba(212,170,70,.2)}

/* Pantalla oscura de la app */
.oc-dl{background:#0E0E0E;color:#EDEDED;font-family:'Inter',sans-serif}
.oc-dl-top{display:flex;align-items:center;gap:.5em;padding:2.6em .8em .7em;border-bottom:1px solid #222}
.oc-dl-logo{width:2.4em;height:2.4em;border-radius:50%;border:1px solid #6B5A2E;background:radial-gradient(circle,#2A2418,#111);
  display:grid;place-items:center;color:#D9B95A;font:700 1.1em 'Cormorant Garamond',serif}
.oc-dl-marca b{display:block;color:#D9B95A;font-weight:700;font-size:1.15em;letter-spacing:.04em}
.oc-dl-marca small{color:#A9A9A9;font-size:.55em;letter-spacing:.2em}
.oc-dl-cuerpo{padding:.7em;display:flex;flex-direction:column;gap:.55em;flex:1;
  background:radial-gradient(60% 40% at 50% 70%, rgba(212,170,70,.08), transparent 70%)}  /* flor dorada tenue de fondo */
.oc-dl-chips{display:flex;gap:.35em;overflow:hidden}
.oc-dl-chips span{border:1px solid #333;border-radius:2em;padding:.35em .7em;font-size:.62em;font-weight:700;color:#CFCFCF;white-space:nowrap;background:#161616}
.oc-dl-chips .on{background:linear-gradient(180deg,#F0D78A,#C9A13B);color:#1A1407;border-color:transparent}
.oc-dl-card{border:1px solid #2A2A2A;border-radius:.8em;padding:.75em .85em;
  background:radial-gradient(70% 90% at 100% 0%, rgba(212,170,70,.22), transparent 60%), linear-gradient(135deg,#1B1B1B,#141414)}
.oc-dl-card b{display:block;font:700 1.3em 'Cormorant Garamond',serif;color:#F2E6C8}
.oc-dl-card span{font-size:.7em;color:#BDBDBD}
.oc-dl-card span i{font-style:normal;font-weight:700;color:#D9B95A}
.oc-dl-nav{margin-top:auto;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #222;padding:.6em .3em .9em}
.oc-dl-nav span{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.5em;font-weight:700;color:#BDBDBD;position:relative}
.oc-dl-nav svg{width:5em;height:5em;padding:1.1em;border-radius:50%;background:#1A1A1A;border:1px solid #2E2E2E;color:#D9B95A}  /* íconos redondos */
.oc-dl-badge{position:absolute;top:-.4em;right:.2em;background:#C0392B;color:#fff;border-radius:50%;width:2.2em;height:2.2em;display:grid;place-items:center;font-style:normal}
/* Historial */
.oc-dl-titulo{font:700 1.35em 'Cormorant Garamond',serif;color:#F2E6C8;margin:0}
.oc-dl-et{font-size:.55em;color:#A9A9A9;letter-spacing:.12em;font-weight:600}
.oc-dl-fecha{border:1px solid #2E2E2E;background:#161616;border-radius:.5em;padding:.5em .6em;font-size:.75em}
.oc-dl-btns{display:grid;grid-template-columns:1fr 2fr;gap:.4em}
.oc-dl-btns span{border-radius:.5em;padding:.55em 0;text-align:center;font-size:.65em;font-weight:700;letter-spacing:.08em}
.oc-dl-btns .c{border:1px solid #333;color:#CFCFCF}
.oc-dl-btns .b{background:linear-gradient(180deg,#F0D78A,#C9A13B);color:#1A1407}
.oc-dl-fac{border:1px solid #2A2A2A;background:#141414;border-radius:.6em;padding:.5em .6em;display:flex;justify-content:space-between;align-items:center;gap:.4em}
.oc-dl-fac small{display:block;font-size:.5em;color:#9A9A9A;letter-spacing:.08em;font-weight:600}
.oc-dl-fac span{font-size:.68em}
.oc-dl-fac b{color:#E8C96A;font-size:.85em;white-space:nowrap}
.oc-dl-total{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2A2A2A;padding:.7em .2em .4em}
.oc-dl-total span{font-size:.65em;color:#A9A9A9;letter-spacing:.08em;font-weight:600}
.oc-dl-total b{font:700 1.3em 'Cormorant Garamond',serif;color:#F0D78A}

/* ----- Flechas y puntos del carrusel ----- */
.oc-controles{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px}
.oc-flecha{width:40px;height:40px;border-radius:50%;border:none;background:var(--oc-azul);color:#fff;font-size:20px;cursor:pointer}
.oc-flecha:focus-visible,.oc-punto:focus-visible{outline:3px solid var(--oc-amarillo);outline-offset:2px}
.oc-puntos{display:flex;gap:8px}
.oc-punto{width:10px;height:10px;border-radius:50%;border:none;background:#C9CEEA;cursor:pointer;padding:0}
.oc-punto.on{background:var(--oc-azul);width:26px;border-radius:5px}
.oc-controles.solo{display:none}  /* si hay un solo proyecto, no se muestran */

/* ===== CELULAR (pantallas angostas) ===== */
@media (max-width:640px){
  .oc-slide{aspect-ratio:auto;padding:7cqw 10px 0}            /* el alto lo da el contenido */
  .oc-titulo{font-size:7.4cqw;max-width:16ch}
  .oc-sub{font-size:4cqw;max-width:32ch;padding:0 8px}
  .oc-escena{--tel:40cqw;gap:3cqw;padding-top:6cqw;height:calc(var(--tel) * 1.55);overflow:hidden}
  .oc-icono{display:none}                 /* en celular sobran los íconos */
}

/* Si la persona pidió menos movimiento, el carrusel no se desliza animado */
@media (prefers-reduced-motion:reduce){ .oc-pista{scroll-behavior:auto} }


/* =====================================================================
   PROYECTO 3: PREVENTA (app naranja para vendedores en ruta)
   ===================================================================== */
.oc-slide.oc-preventa{
  background:
    radial-gradient(60% 70% at 0% 100%, rgba(255,106,19,.7), transparent 60%),    /* brillo naranja abajo izq. */
    radial-gradient(45% 55% at 100% 0%, rgba(255,170,90,.35), transparent 60%),   /* brillo naranja claro arriba der. */
    linear-gradient(135deg,#120B08,#24130B 55%,#120B08);
}
.oc-slide.oc-preventa::before{background:linear-gradient(160deg, rgba(20,12,8,.94), rgba(38,21,12,.92))}
.oc-preventa .oc-sub{color:#FFD2B0}
.oc-preventa .oc-icono{border-color:rgba(255,150,70,.55);box-shadow:0 0 18px rgba(255,106,19,.4);color:#FFC9A0}
.oc-preventa .oc-tel{box-shadow:0 0 0 2px #4A3A30 inset, 0 30px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,106,19,.22)}

.oc-pv{background:#F6F6F8;color:#222}
.oc-pv-top{background:#E8501A;color:#fff;padding:2.6em .9em .6em;font:700 1.25em 'Barlow Condensed',sans-serif;display:flex;align-items:center;gap:.5em}
.oc-pv-top i{width:1.1em;height:1.1em;border-radius:50%;background:rgba(255,255,255,.35);display:inline-block}
.oc-pv-cuerpo{padding:.7em;display:flex;flex-direction:column;gap:.55em;flex:1}
.oc-pv-buscar{background:#fff;border:1px solid #E3E3EA;border-radius:2em;padding:.5em .8em;font-size:.75em;color:#9A9AA8}
.oc-pv-sec{display:flex;justify-content:space-between;align-items:baseline;font:700 1em 'Barlow Condensed',sans-serif;margin-top:.2em}
.oc-pv-sec small{font:600 .6em 'Barlow',sans-serif;color:#1BA7C9}
.oc-pv-promos{display:grid;grid-template-columns:1fr 1fr;gap:.45em}
.oc-pv-promo{border-radius:.7em;padding:.55em;color:#fff;min-height:7.5em;display:flex;flex-direction:column;justify-content:flex-end}
.oc-pv-promo.a{background:#E8501A}
.oc-pv-promo.b{background:#2A2F3E}
.oc-pv-promo em{font-style:normal;align-self:flex-start;background:rgba(255,255,255,.92);color:#222;border-radius:2em;padding:.15em .55em;font-size:.5em;font-weight:700;margin-bottom:auto}
.oc-pv-promo b{font-size:.78em}
.oc-pv-promo small{font-size:.66em;opacity:.92}
.oc-pv-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.oc-pv-cat{background:#fff;border-radius:.6em;padding:.7em .2em;text-align:center;font-size:.66em;color:#444;display:flex;flex-direction:column;align-items:center;gap:.5em}
.oc-pv-cat::before{content:'';width:2em;height:2em;border-radius:50%;border:.22em solid #E8501A;opacity:.85}
.oc-pv-nav{margin-top:auto;display:flex;justify-content:space-around;background:#fff;border-top:1px solid #E3E3EA;padding:.7em .3em 1em;font-size:.6em;color:#8A8A98}
.oc-pv-nav .on{color:#E8501A;font-weight:700}
.oc-pv-item{background:#fff;border-radius:.7em;padding:.65em .7em;display:flex;justify-content:space-between;align-items:center;gap:.4em}
.oc-pv-item b{display:block;font-size:.82em}
.oc-pv-item small{display:block;font-size:.64em;color:#7A7A88;margin-top:.15em}
.oc-pv-item .q{background:#F1F1F5;border-radius:.4em;padding:.25em .7em;font-weight:700;font-size:.85em}
.oc-pv-total{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding:.5em .2em}
.oc-pv-total span{font-size:.75em;color:#666}
.oc-pv-total b{font:700 1.6em 'Barlow Condensed',sans-serif;color:#222}
.oc-pv-boton{background:#E8501A;color:#fff;border-radius:.6em;padding:.7em;text-align:center;font-weight:700;font-size:.9em;margin:0 .7em .9em}
.oc-pv-cli{background:#fff;border-radius:.7em;padding:.6em .7em;border-left:.3em solid #E8501A}
.oc-pv-cli small{display:block;font-size:.55em;letter-spacing:.12em;color:#8A8A98;font-weight:700}
.oc-pv-cli b{display:block;font-size:.9em}
.oc-pv-cli span{font-size:.65em;color:#7A7A88}
.oc-pv-resumen{display:flex;justify-content:space-between;font-size:.72em;color:#666;padding:0 .3em}
.oc-pv-resumen b{color:#222}