/* Utilísimo · capa de elegancia. Carga DESPUES de utilisimo.css
   Criterio: blanco + tinta, serif sobrio en titulos, el fucsia solo como acento,
   la foto del plato pone el color. */

:root{
  --f-display:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --crema:#fdfcf9;
  --crema-2:#f6f1ea;
  --linea:#ebe4da;
  --tinta:#2e1320;
  --gris:#6b5d64;
}

/* ---------- tipografia ---------- */
h1,h2,h3,h4,h5,.section-heading,.intro-heading{
  font-family:var(--f-display)!important;
  letter-spacing:-.012em!important;
  font-weight:600!important;
}
h1,.intro-heading{ font-weight:600!important; letter-spacing:-.018em!important; line-height:1.08!important }
.page-section h2.section-heading{
  font-size:clamp(1.8rem,3.2vw,2.5rem)!important;
  margin-bottom:.5rem!important;
}

/* ---------- portada: fuera el bloque fucsia ---------- */
header.masthead{
  background:var(--crema)!important;
  color:var(--tinta)!important;
  padding:6.5rem 0 5.5rem!important;
  border-bottom:1px solid var(--linea);
}
header.masthead .intro-heading{ color:var(--tinta)!important; max-width:19ch!important }
header.masthead .intro-lead-in{ color:var(--gris)!important; font-size:1.08rem!important }

/* el resaltado amarillo pasa a un subrayado fino */
header.masthead .intro-heading mark,
header.masthead .intro-heading .destacado,
header.masthead mark{
  background:transparent!important;
  color:var(--tinta)!important;
  padding:0!important;
  box-shadow:inset 0 -.14em 0 rgba(252,12,120,.28)!important;
  border-radius:0!important;
}

/* flechas del carrusel: discretas */
.carousel-control-prev,.carousel-control-next{ opacity:1!important; width:7%!important }
.carousel-control-prev span,.carousel-control-next span,
.carousel-control-prev i,.carousel-control-next i{
  background:#fff!important; color:var(--tinta)!important;
  border:1px solid var(--linea)!important; box-shadow:0 1px 4px rgba(46,19,32,.08)!important;
}
.carousel-indicators li{ background:var(--linea)!important; width:7px!important; height:7px!important; border-radius:50%!important }
.carousel-indicators li.active{ background:var(--tinta)!important }

/* ---------- bandas de seccion: sin rosado ---------- */
.page-section .header-container,
#recetas .header-container,
#planificador .header-container,
#calculometro .header-container,
#que_hacemos .header-container,
#como_funciona .header-container{
  background:var(--crema)!important;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding:2.6rem 0 2.4rem!important;
}
.page-section{ padding:0 0 3.5rem }

/* ---------- los pasos 1 2 3: un solo tono ---------- */
#como_funciona .rounded-circle,
#como_funciona .badge,
.paso-num,.numero-paso{
  background:var(--crema-2)!important;
  color:var(--tinta)!important;
  border:1px solid var(--linea)!important;
  font-family:var(--f-display)!important;
  font-weight:600!important;
  box-shadow:none!important;
}

/* ---------- botones: un solo acento por grupo ---------- */
.btn{
  border-radius:9px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  padding:.55rem 1.15rem!important;
  box-shadow:none!important;
}
/* principal */
#btn_buscar,.btn-buscar,
header.masthead .btn,
.btn-primary.btn-lg{
  background:var(--fucsia)!important; border-color:var(--fucsia)!important; color:#fff!important;
}
/* secundarios del panel de filtros */
#btn_quitar_filtros,#btn_aplicar_filtros{
  background:#fff!important;
  color:var(--tinta)!important;
  border:1.5px solid var(--linea)!important;
}
#btn_quitar_filtros:hover,#btn_aplicar_filtros:hover{
  border-color:var(--tinta)!important; background:#fff!important;
}

/* panel de filtros mas sobrio */
#accordionExample>.card,.filtros-card{
  background:#fff!important; border:1px solid var(--linea)!important;
  border-radius:14px!important; box-shadow:none!important;
}
.btn-filtro{
  background:#fff!important; color:var(--tinta)!important;
  border:1px solid var(--linea)!important; font-weight:600!important;
}
.btn-filtro:hover{ border-color:var(--tinta)!important }

/* ---------- tarjetas de receta ---------- */
.thumbnail{ border:1px solid var(--linea)!important; box-shadow:none!important }
.thumbnail:hover{ box-shadow:0 6px 20px rgba(46,19,32,.09)!important }
.tit_nom_plato{ font-family:var(--f-display)!important; font-weight:600!important; letter-spacing:-.008em!important }

/* ---------- la burbuja de sugerencias, discreta ---------- */
#ssbz-btn{
  background:var(--tinta)!important;
  font-weight:600!important;
  box-shadow:0 4px 14px rgba(46,19,32,.22)!important;
}
#ssbz-caja header{ background:var(--tinta)!important }

/* ---------- pie ---------- */
footer{ background:var(--crema-2)!important; color:var(--gris)!important; border-top:1px solid var(--linea) }
footer a:not(.credito-cokrea a){ color:var(--tinta)!important }

/* ---------- pie: fuera la banda rosada ---------- */
footer.footer .header-container,
footer .header-container{
  background:var(--crema-2)!important;
  border-top:1px solid var(--linea);
  border-bottom:none!important;
  padding:1.6rem 0 1.4rem!important;
}
footer .copyright{ color:var(--gris)!important; font-size:.86rem }
footer .quicklinks a{ color:var(--gris)!important; font-size:.86rem }
footer .credito-cokrea{ background:var(--tinta)!important }

/* ---------- portada: el recuadro rosado cortaba el titulo ---------- */
header.masthead .contenedor-slide{
  background:transparent!important;
  color:var(--tinta)!important;
  padding:0!important;
  max-width:36rem;
  overflow:visible!important;
  height:auto!important;
}
header.masthead .contenedor-slide *{ color:inherit!important }
header.masthead .intro-text{ padding:0 }
header.masthead h1,
header.masthead .intro-heading{
  font-size:clamp(2.1rem,5vw,3.4rem)!important;
  line-height:1.06!important;
  margin-bottom:.7rem!important;
  overflow-wrap:break-word;
}
header.masthead .intro-lead-in,
header.masthead .contenedor-slide p{
  color:var(--gris)!important;
  font-size:1.05rem!important;
  line-height:1.5!important;
}
/* el boton de la portada */
header.masthead .contenedor-slide a,
header.masthead .btn{
  display:inline-block;
  background:var(--tinta)!important;
  color:#fff!important;
  border:none!important;
  border-radius:11px!important;
  padding:.8rem 1.6rem!important;
  font-weight:600!important;
  text-decoration:none!important;
  margin-top:.4rem;
}

/* el titulo quedaba debajo de la flecha del carrusel */
header.masthead .container{ padding-left:4.5rem!important; padding-right:4.5rem!important }
@media (max-width:767px){
  header.masthead .container{ padding-left:1.4rem!important; padding-right:1.4rem!important }
  .carousel-control-prev,.carousel-control-next{ display:none!important }
}
/* cualquier resaltado de color dentro del titulo pasa a subrayado fino */
header.masthead .intro-heading span[style*="background"],
header.masthead .intro-heading .destacado,
header.masthead .intro-heading mark,
header.masthead .contenedor-slide span[style*="background"]{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--tinta)!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:inset 0 -.13em 0 rgba(252,12,120,.3)!important;
}
header.masthead .intro-heading{ text-transform:none!important }

/* ---------- pie: columnas decorativas vacias del tema viejo ---------- */
footer .columnas{ background:transparent!important }
footer .col-right,footer .col-center,footer .col-left{ background:transparent!important }
footer .header-container .row{ align-items:center }
footer .copyright{ display:inline-block; padding:.2rem 0 }

/* la firma de Cokrea: que no la tape el boton flotante */
footer .credito-cokrea{ padding-bottom:4.2rem!important }
@media (min-width:768px){ footer .credito-cokrea{ padding-bottom:1.6rem!important } }

/* la firma de Cokrea va en amarillo sobre tinta: que nada la pise */
footer .credito-cokrea a{ color:#edec0d!important; font-weight:700!important }
footer .credito-cokrea span a{ color:#cdbcc5!important; font-weight:400!important }
footer .credito-cokrea{ font-size:.95rem!important }

/* ================= PALETA B · un solo acento =================
   El fucsia neon (#fc0c78) y el amarillo fosforescente (#edec0d)
   daban look de volante de liquidacion. El color fuerte lo pone
   la foto del plato; la interfaz se calla. */
:root{
  --fucsia:#C8265E!important;
  --fucsia-osc:#A61348!important;
  --amarillo:#C9A227!important;
  --turquesa:#4A7C6F!important;
}
/* el unico color fuerte: el boton que queremos que aprieten */
#btn_buscar,.btn-buscar,.btn-primary,.btn-primary.btn-lg,
header.masthead .btn,.ss-aporte,#ssbz-btn{
  background:#C8265E!important; border-color:#C8265E!important; color:#fff!important;
}
#btn_buscar:hover,.btn-primary:hover,.ss-aporte:hover{
  background:#A61348!important; border-color:#A61348!important;
}
/* los pasos 1 2 3: un solo tono, no tres colores peleando */
#como_funciona .rounded-circle,#como_funciona .badge,
.paso-num,.numero-paso,.page-section .rounded-circle{
  background:#f6f1ea!important; color:#2e1320!important;
  border:1px solid #e4dcd2!important; box-shadow:none!important;
  font-family:var(--f-display)!important; font-weight:600!important;
}
/* el subrayado del titulo, en el acento nuevo */
header.masthead .intro-heading span[style*="background"],
header.masthead .intro-heading .destacado,
header.masthead .intro-heading mark,
header.masthead .contenedor-slide span[style*="background"]{
  box-shadow:inset 0 -.13em 0 rgba(200,38,94,.32)!important;
}
/* numeros de los pasos de preparacion */
ol.pasos li:before{ background:#C8265E!important }
/* la firma de Cokrea: dorado apagado en vez de amarillo fosforescente */
footer .credito-cokrea{ border-top-color:#C9A227!important }
footer .credito-cokrea a{ color:#E8C96A!important }
/* indicadores y flechas del carrusel */
.carousel-indicators li.active{ background:#C8265E!important }
.carousel-control-prev i,.carousel-control-next i{ color:#C8265E!important }

/* ---------- los numeros 1 2 3 ----------
   El 3 salia en mostaza clara con numero oscuro: se leia mal.
   Ahora los tres llevan numero blanco y la mostaza se oscurece
   lo justo para que el blanco contraste. */
.paso-n{
  color:#fff!important;
  font-family:var(--f-display)!important;
  font-weight:600!important;
  box-shadow:none!important;
  border:none!important;
}
/* mostaza mas oscura, para que el blanco se lea */
:root{ --amarillo:#9C7A14!important }

/* ---------- los destacados del titulo: subrayado, no bloque ---------- */
header.masthead .destacado,
header.masthead .dest-turquesa,
header.masthead .dest-amarillo,
.intro-heading .destacado{
  background:transparent!important;
  background-color:transparent!important;
  color:var(--tinta)!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:inset 0 -.13em 0 rgba(200,38,94,.32)!important;
}

/* ---------- planificador: se comía media pantalla en blanco ---------- */
#planificador .header-container{ padding:2rem 0 1.6rem!important }
#planificador .tab-content{ padding-top:0!important }
#planificador .tab-pane{ padding:.4rem 0 0!important }
#planificador .tab-pane > .row,
#planificador .tab-pane > .container,
#planificador .tab-pane > .container-fluid{ min-height:0!important }
/* la tarjeta del día: que no quede un cajón vacío al lado del plato */
#planificador .card,
#planificador .tab-content > .tab-pane > div{ min-height:0!important }
#planificador .nav-tabs{ margin-bottom:.8rem!important; border-bottom:1px solid var(--linea)!important }
#planificador .nav-tabs .nav-link{ padding:.55rem 1.1rem!important }
/* el total del día, más discreto */
#planificador .total-dia,
#planificador [class*="total"]{ padding:.7rem 1rem!important; font-size:.92rem!important }