/* ============================================================
   EVD PORTFOLIO — estilos custom
   Paleta: #0D1B5E (azul), #F97316 (naranja), #F4F6FF (claro)
   Tipografía: Montserrat (display), Syne (body)
   ============================================================ */

/* Torn paper — sección hero hacia surface (blanco/claro) */
.torn-paper-edge {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0,28 L30,8 L60,32 L90,14 L120,36 L150,18 L180,40 L210,15 L240,34 L270,10 L300,38 L330,16 L360,30 L390,12 L420,40 L450,20 L480,35 L510,9 L540,42 L570,18 L600,32 L630,11 L660,38 L690,16 L720,30 L750,12 L780,42 L810,22 L840,36 L870,10 L900,40 L930,18 L960,34 L990,13 L1020,40 L1050,20 L1080,32 L1110,8 L1140,38 L1170,16 L1200,30 L1200,48 L0,48 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='48' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0,28 L30,8 L60,32 L90,14 L120,36 L150,18 L180,40 L210,15 L240,34 L270,10 L300,38 L330,16 L360,30 L390,12 L420,40 L450,20 L480,35 L510,9 L540,42 L570,18 L600,32 L630,11 L660,38 L690,16 L720,30 L750,12 L780,42 L810,22 L840,36 L870,10 L900,40 L930,18 L960,34 L990,13 L1020,40 L1050,20 L1080,32 L1110,8 L1140,38 L1170,16 L1200,30 L1200,48 L0,48 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 48px;
  mask-repeat: no-repeat;
  mask-position: bottom;
  -webkit-mask-size: 100% 48px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom;
}

/* Torn paper — transición dentro de tarjetas Instagram, borde superior dentado hacia arriba */
.torn-paper-card-top {
  clip-path: polygon(
    0% 60%, 4% 25%, 8% 60%, 12% 18%, 16% 55%, 20% 22%, 24% 62%,
    28% 18%, 32% 58%, 36% 22%, 40% 58%, 44% 18%, 48% 62%, 52% 22%,
    56% 58%, 60% 18%, 64% 55%, 68% 22%, 72% 60%, 76% 18%, 80% 58%,
    84% 22%, 88% 60%, 92% 18%, 96% 52%, 100% 22%, 100% 100%, 0% 100%
  );
}

/* Accent line naranja (32×3px, bordes redondeados) */
.accent-line {
  width: 32px;
  height: 3px;
  background-color: #F97316;
  border-radius: 9999px;
  display: block;
  margin-bottom: 12px;
}

/* Material Symbols defaults */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Mobile nav overlay */
#mobile-menu {
  display: none;
}
#mobile-menu.open {
  display: flex;
}

/* Service cards — hover lift */
.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(13, 27, 94, 0.12);
}

/* Portfolio filter — tarjetas ocultas */
.portfolio-card {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.portfolio-card.hidden-card {
  display: none;
}

/* Filter chip activo */
.filter-chip.active {
  background-color: #0D1B5E;
  color: #ffffff;
  border-color: #0D1B5E;
}
.filter-chip:not(.active) {
  background-color: #ffffff;
  color: #0D1B5E;
  border-color: #E8ECFF;
}

/* Timeline — línea vertical conectora */
.timeline-item {
  position: relative;
}
.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(to bottom, #F97316, #E8ECFF);
}

/* Dot de timeline */
.timeline-dot {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #0D1B5E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* FAB WhatsApp */
.fab-whatsapp {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 99;
  background-color: #25D366;
  color: #ffffff;
  border-radius: 9999px;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
}

/* Diferenciadores — icono contenedor */
.diff-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(249, 115, 22, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Tamaños de fuente pequeños — ligeramente agrandados para mejor legibilidad */
.text-xs  { font-size: 0.875rem !important; line-height: 1.35rem; }   /* 14px (era 12px) */
.text-sm  { font-size: 1rem !important; line-height: 1.6rem; }        /* 16px (era 14px) */
.badge-pill { font-size: 0.875rem; }

/* Placeholder de foto de Santiago (hero) */
.photo-placeholder {
  background: linear-gradient(135deg, #1E3A8A 0%, #0D1B5E 60%, #3730A3 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.photo-placeholder span.material-symbols-outlined {
  font-size: 120px;
  color: rgba(249, 115, 22, 0.5);
  margin-bottom: 1rem;
}

/* Portfolio image placeholder */
.img-placeholder-yt {
  background: linear-gradient(135deg, #1E3A8A, #0D1B5E);
}
.img-placeholder-ig {
  background: linear-gradient(135deg, #F4F6FF, #dde3ff);
}
.img-placeholder-photo {
  background: linear-gradient(135deg, #eae7ee, #dbd9df);
}
.img-placeholder-red {
  background: linear-gradient(135deg, #FFF0E6, #ffe8d0);
}

/* Badge pill */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}